GitHub連携しているAmplifyアプリの開発環境をCloud9で構築する |システム開発

こんにちは。

突然ですが、開発環境が自分のPCにしか構築されていないのに、PCからけたたましい音が頻繁にすると、不安になりますよね。

全てが消えてしまう前にCloud9というAWSのサービスを使って開発環境を構築したいと思います。

社内業務用に使用しているVueで書いたAmplifyアプリケーションで、デプロイにはGithubを連携させています。

別記事で紹介されているように、Amplifyの開発環境構築は可能なので今回はGithubとの連携が上手くいくかに着目したいと思います。

Cloud9環境をつくる

詳細は割愛します。各項目の説明についてはこちらの記事を参照ください

インスタンスタイプでt2.microを選択したらAmplifyCLIのインストールで失敗したのでt3.smallにします。

AmplifyCLIとyarnのインストール

cloud9には最初からインストールされているものが多いので必要なyarnとamplify cliのみインストールを行います。

# 実行するコマンド
npm install -g @aws-amplify/cli
npm install -g yarn

インストールできました。

GitHubからソースコード取得

ガイドを参考にリモートリポジトリをcloneします。

ユーザーネームとパスワードが求められますので入力してください。

※パスワード認証は廃止されたため、アクセストークンを使用してください。

https://docs.github.com/ja/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token

https://docs.aws.amazon.com/ja_jp/ja_jp/cloud9/latest/user-guide/source-control-gitpanel.html

https://docs.aws.amazon.com/ja_jp/ja_jp/cloud9/latest/user-guide/using-gitpanel.html

ローカルで実行

取得したソースコードでローカル実行が問題ないか確認してみます。

実行はできました。

cloud9で実行中のアプリケーションのプレビューから確認します。

特に何もせず確認すると「Invalid Host header」と出ています。アドレスバー部分をみると、先ほどローカル実行した時に出ていたホスト名とは違います。

どうやらcloud9環境を作成した時に割り当てられたIDとリージョン名で構成されているようです。

公式にもその旨が書いてありました。

URL は https://12a34567b8cd9012345ef67abcd890e1.vfs.cloud9.us-east-2.amazonaws.com/ 形式で表示されます。12a34567b8cd9012345ef67abcd890e1 は AWS Cloud9 が環境に割り当てる ID、us-east-2 は環境のAWSリージョンの ID です
引用元　https://docs.aws.amazon.com/ja_jp/cloud9/latest/user-guide/app-preview.html#app-preview-preview-app

前回の記事を参考にvue.config.jsを作成して回避しました。

躓いてしまいましたが、これで自PCで構築している開発環境と同じ状態になりましたので残すはGit操作のみです。