[AWS]AWSAmplifyConsoleを使ってVue製アプリをデプロイする

はじめに

今年のre:Inventも新サービスやアップデートがてんこ盛りで、さらに追いかけるのが難しくなってきましたね…衛星通信をマネージドで提供するって何？www
その中で AWS Amplify Console なるサービスが発表されました。今回はそのサービスを利用してVue製のアプリケーションをデプロイしようと思います。

注意書き

この記事ではVueのことはほぼ触れません。
なんでVue製のアプリをデプロイしようとしたのかは、筆者がVue好きだからです。

AWS Amplify Console

このサービスは一体何かと言うと、アプリケーションをデプロイするするためのCI/CDパイプラインを一括で設定することができるサービスなのです！
普段CodeBuildやCodeDeployといったCode兄弟を利用してパイプラインを構築している方が多いと思います。
このAmplifyConsoleを利用するとその手間が一切なくなるのです！！

早速試していきましょう

今回でデプロイするのはこれです！！

はい、VueCliで vue create したそのままの状態ですw
予めこのソースコードをGitHubにpushしきます。

リポジトリを選択する

GitHub / GitLab / BitBucket / CodeCommit の中から選択できます。今回はGitHubのリポジトリを利用します。

リポジトリとブランチを選択する

GitHubとの認証をして、リポジトリとブランチを選択します。

ビルド設定

ビルドの設定をします。
ビルドの設定はデフォルトでこのようになっています。

version: 0.1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

普段からCodeBuildを利用して build_spec.yml などを書いている方はイメージ付きやすいと思います。
どのステージで、どのようなコマンドを実行するのかなどを設定することができます。今回はデフォルトのままでいきましょう。

デプロイする

これで準備が整ったのでデプロイしましょう！

このような画面に遷移して、デプロイのステータスを確認することができます。

画面を確認する

デプロイが完了したら、コンソールのリンクから実際にページを確認しましょう

デプロイできました！！

さいごに

ここまで10分程度で作業が完了しました。
もちろん、対象ブランチがpushされるたびにデプロイが実行されます。
デフォルトでは https://blanch.xxxxxxxxx.amplifyapp.com/ というようなURLが用意されます。HTTPS対応されているのが嬉しいですね！
自分でやろうと思ったらCloudFrontなりELBなりを用意して証明書を適用しないといけませんから大変です。
また独自のドメインで公開することも可能です。
AWS Amplify Consoleを利用することで、デプロイするためのパイプラインを構築するのがすごく用意になりました！！嬉しい！！！
ではまた！