Serverless Framework で Amplify Console を使えるプラグインで SPA(Vue.js) をデプロイしてみる – デプロイ編

記事タイトルとURLをコピーする

こんにちは、技術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 を盛り込みたい、といったニーズがあれば、使ってみると良いかもしれません。