AWS Amplify Consoleを使って楽々デプロイ

はじめに

Vue.jsを勉強するにあたり、自己紹介サイトを作成してみました。
今回は、作成したサイトの公開方法になります。

用意するもの

• AWSのアカウント
• SPA(Vue.js)

AWS Amplify Consoleを使う

AWS Amplify Consoleとは

サーバーレスバックエンドを持つ静的ウェブサイトあるいは単一ページのウェブアプリケーションの開発、デプロイ、ホスティングのための詳細なワークフローを提供してくれるサービス。

#実践
今回はAmplifyを使わない公開方法とAmplifyを使った方法、両方を実践していきます。

手動でデプロイし、ブラウザからアクセスする

• ローカルPCでビルドして静的ファイルを作成する
  • 対象ディレクトリで
  • $ yarn build
  • ディレクトリ内に「dist」があり、中に静的ファイルが生成されていることを確認する。
    
• s3バケットを作成し、静的サイトとして公開する。

  • AWS Consoleから「S3」を検索。

  • 任意の名前でバケットを作成。

  • プロパティのStatic website hostingを選択。

  • 「このバケットを使用してウェブサイトをホストする」を選択。

  • インデックスドキュメントを設定して保存。
    

  • デフォルトではパブリックアクセスをブロックするので設定を変更する。

    • 「アクセス管理」を選択。
    • 「編集」を選択し、「パブリックアクセスをすべてブロック」のチェックを外して保存。
      

  • バケットポリシーを追加。

    • 「アクセス管理」を選択。
    • 「バケットポリシー」を選択。
    • 下記ポリシーエディタを入力して保存。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::{{s3のバケット名}}.com/*"
            ]
        }
    ]
}

• 作成したバケットにdistファイル内をアップロード
• 静的ウェブサイトホスティング用に S3 バケットを設定する方法
• プロパティのStatic website hostingにあるエンドポイントにアクセス
• サイトが開いたら成功です。

以上が__Amplifyを使わず手動でデプロイしアクセスする__方法になります。

##Amplify Consoleを使ってデプロイする。

• CodeCommitに自分のリポジトリを作成する。
  • AWS Consoleのサービスから「CodeCommit」を検索。
  • 右上の「リポジトリを作成」をクリック。
  • リポジトリ名を入力して「作成」をクリック。

　これでCodeCommitに自分のリポジトリを作成できました。

• 作成したSPAを自分のリポジトリに1stコミットする。

  • 先ほど作成したリポジトリを任意の場所にクローンします。
  • $ git clone ssh://git-codecommit.xxxxxx.amazonaws.com/xxxxx
  • cloneしてきたディレクトリに作成したSPAを入れる(※ディレクトリを丸ごと入れないこと)
  • 対象ディレクトリで
  • $ git add .
  • $ git commit -m "{{任意のメッセージ}}"
  • $ git push origin master

• CodeCommitでpushされているかを確認します。
  

• AWS Consoleで「AWS Amplify」を検索。

• 「Deploy with the Amplify Console」の「GET STARTED」をクリック。
  

• From your existing codeでは、先ほどCodeCommitにcodeをpushしたので選択し、Continueをクリック
  

• 自分の作成したリポジトリとブランチ「master」を選択し、次へをクリック

• 任意のアプリの名前を入力し、ビルドの設定を以下に書き換えます。

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm install v12.16.2
        - nvm use v12.16.2
        - npm install -g yarn
        - yarn install
        - node -v
    build:
      commands:
        - yarn run build
  artifacts:
    baseDirectory: dist/
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

• Roleを新規作成して>次へをクリックする
  

• 保存してデプロイをクリック

• Amplifyがプロビジョン,ビルド,デプロイ,検証を自動で進めていくの完了するまで待ちます。

• 成功するとプロビジョン~デプロイにチェックマークが付きます。

• ドメインのURLをクリックして画面が表示できれば成功です。
  

###公開したサイトに変更を加える

Amplify Consoleではコードがコミットされるたびにフロントエンドとバックエンドが単一のワークフローにデプロイされます。
これにより、アプリケーションのフロントエンドとバックエンドの間の矛盾は解消され、デプロイが正常に完了した場合にのみ、ウェブアプリケーションが更新されます。

AWSのユーザーガイドにこのような記載があります。
今回は変更を加えてコミットすることで、実際に更新されるか確認していきます。

• masterブランチしか存在しないので新しいブランチを作成し、移動します。

  • $ git branch develop origin/master
  • $ git checkout develop

• developに移動したのでソースコードを変更し、コミット,プッシュします。

  • $ git add .
  • $ git commit -m 'commit'
  • $ git push origin develop

• AWS Consoleで確認すると、ブランチに「develop」が追加されています。
  

• AWS Consoleでプルリクエストの作成をクリック。
  

• ターゲットに「master」,ソースに「develop」を選択して比較をクリック。

• 画面下に変更内容が表示されるので、間違いなければタイトルを入力して「プルリクエストを作成」をクリック。

• プルリクエストの画面に先ほど自分で作成したプルリクエストがあるのでクリック。

• 右上の「マージ」をクリックすると下記のような画面が表示されるので、「プルリクエストのマージ」をクリック。(※ブランチを残したい場合は削除のチェックを外す)
  

• Amplify Consoleで自動的にビルド・デプロイが走ります。

• 最後に画面を更新して、変更されていれば成功です。

もし、変更の一連の流れをAmplifyなしで行おうとすると

1. ソースコードを変更後に手動でビルドを行う
2. 公開しているs3に更新したdistをアップロードする
   といった手順が必要になります。

###自動デプロイのメリット

• 自動化することで履歴が残る
• 戻り先を指定してロールバックできる