電話番号 電話番号 お問い合わせ

受付時間 平日10:00~18:00

TOP

資料ダウンロードはこちら >>

ロゴ

AWSやシステム・アプリ開発の最新情報|クロスパワーブログ

Amplify AWS Cloud 9

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操作のみです。

コミット & プッシュ

修正したファイルをコミットし、プッシュします。

Source Control内で操作ができるので、gitコマンドを丸暗記していなくても安心ですね。もちろんターミナルからgitコマンドを叩いても問題ありません。

プッシュされたことを確認できました。

デプロイ確認

ちゃんとAmplifyのデプロイも完了していました。

お見せすることは出来ないのですが修正した部分も、もちろん反映されていました。

おわりに

何か難しい手順があるのかと思いましたがスムーズにGitHub連携ができてよかったです。

年に数回しか触らない環境なので、起動中だけ課金されるCloud9のスタイルはあっていると感じました。

そういえばデフォルトだとCloud9のテーマは黒背景なのですが色々カスタマイズできるようなので、自分の使いやすいようにできていいですね。わたしは白背景を好んでいるので記事の途中で変えましたが気づきましたでしょうか

Welcomeページではテーマの設定のみですが「More Settings」からより詳細な設定ができるので気になる方は是非触ってみてください。