albatrosary's blog

UI/UXとエンタープライズシステム

NestJS の実行環境毎に設定を変える

@nestjs/config ではなくdotenv 。@nestjs/config は内部的に dotenv も使ってます github.com dotenv のインストール npm i dotenv -S npm i @types/dotenv -D ※ Windows との差異を埋めるには cross-env - npm 設定 例えば import { NestFactory } from '@…

App Engine から Cloud SQL に接続する

Cloud SQL に接続するにはマニュアルに書かれている通りで、特に App Engine から接続するときにはソケットによる接続を行う 形式 /cloudsql/INSTANCE_CONNECTION_NAME を使用して、Cloud SQL インスタンスの UNIX ドメイン ソケットにサービスを接続できま…

Auth0 の Management API で User create エラーのとき

400 Cannot set username for connection without requires_username. のエラーはこれの設定ができてない。スイッチ入れてね

node_modules 内のライブラリへのパッチ

node_modules 内のライブラリが JSON.stringify() 使ってて循環オブジェクト参照構造体の呼び出しエラーになっていたからパッチを当てた。その当て方。 patch-package を npm i して scripts に登録する(※1) node_modules 内のコードに手を加える npx patch-…

NestJS のプロジェクト作成時にやること

NestJS CLI のインストール % npm i -g @nestjs/cli NestJS 関連のプロジェクト生成 % nest new project-name % npm i nest-router -S % npm i class-transformer class-validator -S GCP 用の package.json { "name": "", "version": "0.0.1", "description…

Angular で Management API を叩く

Note though that usually the end user would not call that management API himself, but that would be a call from your backend to the Management API, where your backend would fetch the access token for it via Client Credentials Grant (M2M / …

NestJS でのバリデーション設定

ライブラリの登録 npm i class-validator, class-transformer -S ValidationPipe有効化 async function bootstrap() { const app = await NestFactory.create(AppModule); app.useGlobalPipes(new ValidationPipe()); @UsePipes(new ValidationPipe()) を使…

GCP での node のエントリーファイルを指定する

GCPでのデフォルトのエントリーファイルは server.js なので app.js にしたい場合は package.json に指定しておく "scripts": { "start": "node app.js" },

App Engine アプリを HTTPS リクエストのみにする

「アプリのハンドラで強制的に HTTPS を使用する場合は、app.yaml 内の各ハンドラに対して secure: always 要素を指定できます。次に例を示します。」だね。 cloud.google.com

Auth0 で予め登録したユーザのみログインさせる

認証プラットフォーム Auth0 ってソーシャルログイン前提と勝手に思ってたが、予め登録したユーザのみログイン許可することもできる。Twitterで呟いたらフォローしてもらえました。ありがとうございました。 Social Connection の場合はルールで対応 Auth0 …

NestJS でエントリーファイルの変更

nestjs でエントリーファイルを指定するときに少し困ったので見たところを書いておく。簡単なところで nest-cli.json は次のように使ってる。困りごとは entryFile が main.ts がデフォだけどそこを app.ts に変えたかった。 だけども Nextjs とか NuxtJS と…

カラーコンセプトシートの簡易版作ってみた

デザインカンプ作るときにカラーコンセプトと言うページを作るんですが、デザイナーが俗人的にやってるので補色とか反対色等々の定義を調べてサイトにしてみました。これにウンチクを付け加えると立派なWebアプリケーションのデザインカンプが出来上がります…

GCP でカスタムドメイン定義した後にサブドメインを追加する

[App Engine] ->[設定]->[カスタムドメイン]タブ->[カスタムドメインを追加]でサブドメインを追加する ex) hoge.io ドメインに demo.hoge.io を追加したい場合を想定 設定に関しては画面指示通り 最後にGoogle Domains に設定をする cloud.google.com

SPAでブラウザ更新すると404にならないように GCP を設定する

app.yaml に設定する。詳細はこちら cloud.google.com ex) handlers: - url: /(.*\.(gif|png|jpeg|jpg|css|js|ico|woff2|eot|ttf|woff|txt))$ static_files: angular-app/\1 upload: angular-app/(.*) - url: /(.*) static_files: angular-app/index.html up…

GCPのプロジェクトに複数サービス(App Engine)を設置したときのディスパッチャ設定

ここに書かれている通り cloud.google.com ex. dispatch: - url: "subdomain.hoge.io/*" service: subdomain - url: "subdomain-1234567890.dt.r.appspot.com/*" service: subdomain - url: "*/api/*" service: api-service - url: "*/*" service: default ※…

GCP でカスタムドメインで HTTPS を使う

GCPの App Engine でカスタムドメインを使いHTTPSを設定するには「App Engine」の「設定」で「カスタムドメイン」を設定し、SSLセキュリティとしては Googleが管理を使うとコストがかからない。 App Engine の設定 cloud.google.com

Github Actions を使って GCP にデプロイ

設定はこちら: https://github.com/marketplace/actions/publish-app-to-google-app-engine GCP_SA_KEY は Google Cloudの「IAMと管理」にあるサービスアカウントでアカウントの「鍵を作成」する ファイル(※1)がダウンロードされるのでそのファイルを Base64…

3期目も無事終了

弊社も無事3期目も終了しました(期末は7月末ですが決算整理が終わり利益確定したという意味)。創業時に比べかなり成長できたと思いますし、やはり3期目後半になるにつれて組織という意味で「会社」に成れたのではないかなと感じてます!非上場企業ですの…

エンタープライズ開発では理論も大事(当たり前だけど)

メモです。 どうもフロントばかりやってると雰囲気で仕事を進めてしまうような感じになり、大規模な開発に取り組むと色々と辛い(忘れてしまった)ところがあるので以前勉強した内容をもう一度再入門しようと思い本を購入(購入したいなと思ってるのも含む)…

開発センターという名の事務所を広くしてみた(引っ越した)

日記です。 事務所がちょっと手狭になり引っ越しました。基本的にほとんどの人がリモートで作業している10名にも満たない会社ですが、一人当たりのスペースは広く取りたいし、あまり密接しているとストレスになるのもと思い、お金も乏しいですがやっちゃい…

Microsoft MVP アワードを再受賞しました

ということで1年間宜しくお願い申し上げます。

PWA(Progressive Web Apps)がようやく流行り出したけど Push通知 がウザすぎる

PWA(Progressive Web Apps)をやり始めているところが多くなりそれ自体は喜ばしいところです。ただ、最近のWebサイトで「通知しますか?」と言って来ることが多くなり正直ウザすぎです。誰がこんなの考えたんだってくらいイラっとします。 イメージですが、…

abc2018s に登壇で参加してきました

de:code2018 に引き続き、 6/9 Android の ABC でも登壇の機会を頂きありがとうございました。内容は de:code 2018 と同じでしたがよりモリモリなお話しができたと思います。スタッフの方々をはじめとして聴講してくださった方々に御礼申し上げます。 abc.an…

decode18 に登壇で参加してきました

5/23 decode18 に登壇で参加してきました。貴重な経験をさせて頂きましてありがとうございました。かなり釣りっぽくなってしまいましたが「3大フレームワーク(Angular, React, Vue.js)比較によるエンタープライズ Web アプリケーション開発の最適化」とい…

Visual Studio Code の Swagger Viewer プラグインを使ってみる

Swagger Editor 使って Swagger 定義ファイルを編集するのがめんどくなったので VSCode にプラグイン無いかなと探したところ(正確には探してもらった)良さそげなのがあった。 marketplace.visualstudio.com swagger.yml を直接編集しリアルタイムに Swagge…

Swagger Codegen を使って Cognitive Service クライアントを Angular で実装する

マイクロサービスだの何だのと(という訳でもないですが)クライアントとサーバーのAPIを作るのが段々と面倒になって来ているので本腰いれて Swagger 使おうと思い色々と調べてます。Swagger の JSON ファイルをコマンド一発でやってくれるの無いかな?と見…

話し聞いたので Cognitive Services を使ってみる

Global Azure Bootcamp 2018@Kansai でフロントエンドの重鎮バスタブさんが Cognitive Services のデモをやっていたので真似してやってみた。センス悪く「ハエ」を題材にしてみました。 azure.microsoft.com Azure でプロジェクト作成 Azure にログインし Cu…

以前書いた Angular コードを v2 から v5 へアップデートした

以前作った Angular v2 で書かれたコードがあったので Angular v5 へアップデートした。書いたコードは https://angular.io/tutorial を少し変えたもの。これを ng update で変更してみた。 github.com ちなみに変更前のライブラリはこちら: "dependencies"…

Angular と Azure Function と Swagger

Angular と Azure Function と Swagger を利用している。Swagger はあまり好みじゃなかったんだが他に良いAPI設計する場所とそれを管理する場所も見つからなかったので、遅ればせながら本腰入れて利用しようと思った次第でメモ的な何か。 いい加減な説明 Swa…

@angular/pwa を使ってみる

Progressive Web Apps ってそんなに新しいネタという感じはしないけど、twitter 見てたら @angular/pwa というのが v6 で利用できるらしいので備忘録 A new Angular Service Worker — creating automatic progressive web apps. Part 2: practice の画像を拝…