こんにちは、技術1課の加藤です。
昨日、弊社ブログを Amplify で検索していたら衝撃の記事を見つけてしまいました。↓
Serverless Framework で Amplify Console を使えるプラグインで SPA(Vue.js) をデプロイしてみる – 準備編
準備編で止まっている...だと...！
どうやら本ちゃんのデプロイ編を出す前に PC を買い替えてしまい、データ移行時にブログデータが漏れてたっぽいです。準備だけさせて皆様をお待たせしてしまい、大変申し訳ございません。
もはや旬な情報でもなんでもないんですが、続きを書いていこうと思います。
概要おさらい
Serverless Framework のプラグインを使って、 Amplify Console で Vue.js アプリケーションのホスティングを行います。
Serverless Framework で UI をデプロイしようと思うと S3 へのファイルアップロードが難しくてやや面倒だったのですが、それが解消されそう、という内容でした。
では続き。
GitHub にプッシュ
Amplify Console でホスティングするためには、フロントエンドのコードが GitHub に上がっている必要があります。
GitHub にてリポジトリを作り、アップロードしておきましょう。
一応コマンドも記載しておきます。 (vue create でディレクトリ を作成しているため、git init は必要ありません)
$ pwd /path/to/serverless-amplify-frontend $ git add App.vue $ git commit -m 'modify: App.vue' $ git remote add origin git@github.com/<user>/<repo>.git $ git push origin master
プラグインを追加
プラグインをインストールしていきます。
$ cd ../serverless-amplify-backend $ pwd /path/to/serverless-amplify-backend $ npm install -D @wizeline/serverless-amplify-plugin
servereless.yml にもプラグインの設定を書き込んでおきます。
ついでに Lambda のパッケージに盛り込む必要のないファイルたちを exclude しましょう。
plugins:
- serverless-amplify-plugin
package:
exclude:
- '*/**'
include:
- handler.py
今回プラグインを使っているため、設定の記述はプラグインの記法に従います。今回は以下のように custom に記載していきます。
custom:
amplify:
repository: https://github.com//.git
accessToken: <xxxxxxxxxxxx>
branch: master
AccessToken は GitHub の Personal access tokens というものです。
Amplify Console を使ったデプロイを行うためにはリポジトリに Webhook を仕掛ける必要があるため、リポジトリに対するアクセスが可能なトークンを発行 (権限設定時に repo にチェック) し、これを渡してあげる必要があります。
Creating a personal access token for the command line - GitHub Help
なお今回はテスト実行ということで accessToken を使ってデプロイを行いますが、これをすると CFn テンプレートにアクセストークンの情報が残りますし、あまり良くないです。
セキュアに行いたい場合には Secret Manger を使ってアクセストークンを保持する方法が使えるのでそちらを行うと良いでしょう。
デプロイ
さてここまで設定ができたら実際にデプロイをしていきましょう。
コマンドは基本これだけ。
$ serverless deploy
流石サーバーレスフレームワーク。便利。
デプロイが完了したら、 AWS コンソールを開いて Amplify を開きます。
作成した serverless-amplify-backend アプリがあるので、これを選び、画面中央辺りに表示されている Run Build ボタンを押します。
どうやら Amplify Console の設定は諸々行ってくれるものの、ビルドを走らせる部分はやってあげないといけないみたいです。
ともあれこれが完了したら、晴れて Amplify Console でのホスティングが完了します。発行される https://master.xxxxxxx.amplifyapp.com の URL にアクセスして正しく動いているか確認しましょう。
まとめ
Amplify 使ってバックエンド作った方が楽だなあとは思いましたw。
まだ環境変数やその他細かな Amplify Console の設定は難しいようですし、実用性はあまり高くないかなというのが正直なところ。
すでに Serverless Framework で API を作っているようなプロジェクトで、フロントのコードの CI/CD を盛り込みたい、といったニーズがあれば、使ってみると良いかもしれません。
