GitHub CodespacesでAmplifyを使い始めてみよう(プロジェクト作成編)

こんにちは。アドベントカレンダー18日目です。今年はフロントエンドまわりであれこれ開発することが多かったので、振り返りを兼ねてこれからフロントエンド開発を始める方向けに入門編としてお送りしています。最終日の25日には何かアプリケーションができていることが目標です。

↓最初から読み始めたい方はこちらか↓

devops-blog.virtualtech.jp

おさらい

Visual Studio Codeを使ったReactの開発環境の構築(第1回)
CSSフレームワークの1つであるtailwindcssを使ったUI開発(第2回)
コンポーネント化(第3回)
フォーマッター(第4回)
Linter(第5回)
バージョン管理(第6回)
状態管理とReact hook form(第7回、第8回、第11回))
Visual Studio Codeの設定(第9回、第10回、第16回、第17回)
Reactルーティング(第12回)
Playwright(第13回、第14回)
GitHub CodespacesでAmplify
- 環境立ち上げとCLIツールの有効化(第15回)

今回のはなし

これまでNext.js(React)を使った開発環境の構築について学んできました。ここからはあとは何かアイデアがあれば作るだけ、という段階まで到達できました。

しかし、ローカル環境だけでしか動かせないアプリケーションでは、どこかでモチベーションが下がってしまいます。せっかく作ったアプリケーションをそのままお蔵入りにせずに、同僚や友達、家族に共有して実際に動かしてみてはいかがでしょうか。

実際に公開するアプリケーションを1から用意しようと思うと色々と準備が大変ですし、それ相応のインフラやバックエンドの知識が求められます。

本格的に運用することを考えると専門にやっているプロに事前に相談することをお勧めしますが、自分のアイデアを形にして手触り感あるプロダクトとして動かすことができることはとても大切です。

そのようなアイデアの熱が冷めないうちに形をして公開できる方法の1つとして今回はAmplifyについて学んでいきましょう。

Amplifyとは

第15回でAWSコマンドとAmplifyコマンドを使えるように準備編としてお送りしました。前回は、Amplifyについて全く触れずにコマンドだけ有効化してしまいました。

Amplifyとは、Amazon Web Services(AWS)が提供するフルスタックなWebアプリケーションやモバイルアプリケーションを短時間で構築することができるサービスです。CI/CDとの連携もできるため最近流行りのDevOpsな環境の構築も可能です。

ここだけ聞くと何でもできそうな万能ツールのように思えますが、使用できるアーキテクチャが限定されていたり、カスタマイズ機能を使って自力でCDKやCloudFormationのコードを記述したりする必要があるケースもあります。そのため、本格的に運用を目指していくとなると、インフラやアーキテクチャに詳しい人のアドバイスをもらいながら進めていくことをお勧めしています。

GitHub Codespacesをなぜ使うのか？

第15回でAWSコマンドを使用できるようにしましたが、それだけではCLIツールからAWSサービスへアクセスすることができません。アクセスするためには、アクセス情報を設定する必要があります。

ローカルマシン上で直接CLIツールとを使用するためには環境変数などにexportしておけば自由に使えました。しかし、Dev Containersを使ってコンテナ上で開発をする際には、起動するたびに情報を受け渡しする必要があります。しかし、Dev Containersを使う際にはGitHubから直接クローンするような使い方も想定されるため、事前にプロジェクトのディレクトリ内に.envファイルなどを置いておくことができません。だからといって、GitHubリポジトリ上で.envファイルなどの機密性の高い情報を保持することはアンチパターンです。

今回は1つのやり方としてGitHub Codespacesを使ってGitHub Actionsと同じようにシークレットに機密性の高い情報を保持してみようと思います。この方法は、GitHub Actionsではよく使われる方法ですが、Codespacesでもサポートされている点が筆者としては嬉しいポイントです。

準備

Amplifyを使用するためにはAWSアカウントが必要です。また使用状況によっては課金が発生しますが、通常の時間単位課金と異なりリクエスト数や使用量に応じた課金が行われるため、アクセスやデプロイなどをしなければほとんど費用はかかりません。使用状況が全く一緒というわけではないですが、筆者が個人開発でプロトタイプ運用している環境は2000円/月未満で運用できています。オンデマンドインスタンスを1つ立ち上げ続けるよりは遥かにお安く運用できているという印象です。

AWS CLIの設定

まずはAWS CLIを使ってAWSサービスに接続できるようにする必要があります。 CLIツールを使用するためにはシークレットキーと呼ばれる接続情報が必要です。今回は、IAMユーザーの作成方法やシークレットキー情報の作成方法などは割愛します。

シークレットキー情報が確保できたら、通常は次のコマンドを実行してあれこれ設定をします。

aws configure

コマンド実行後にアクセスキー、シークレットキー、リージョン名、設定ファイルの出力形式の順に入力を求められます。シークレットキーとアクセスキーは事前に取得しておいた接続情報を使って入力してください。

リージョン名は、ap-northeast-1としています。出力形式は、今回は未設定でエンターを押してください。

別の方法として、AWS CLIには環境変数にシークレット情報を渡すことで設定を保持できます。この仕組みを使って今回はGitHub上のシークレット情報からAWS CLIに使用する接続情報を渡してみたいと思います。

GitHubページにアクセスしてプロジェクトの設定画面を開きます。

設定画面を開いたら、シークレットと変数＞Codespacesを選択してください。

画面が表示されたら次のシークレット情報をそれぞれ登録してください。

AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY
AWS_DEFAULT_REGION

すべて登録が終わるとこのように表示されます。

設定が完了したらCodespacesを再度起動し直してください。Visual Studio Codeが起動できたら次のコマンドを実行して設定が反映されているか確認します。

$ printenv | grep -E "^AWS_"

AWS_DEFAULT_REGION=XXXXXXXX
AWS_SECRET_ACCESS_KEY=XXXXXXXX
AWS_ACCESS_KEY_ID=XXXXXXXX

Amplifyコマンドの設定

次のAmplifyコマンドを実行するために必要な設定をします。Amplifyコマンドを実行した際にxdg-utilsというライブラリが求められますので、次のコマンドを実行してインストールしてください。

sudo apt-get update -y
sudo apt-get install -y xdg-utils

インストールが終了したら次のコマンドを実行して設定を進めます。

amplify configure

このコマンドを実行した時にユーザーを作成するかどうか聞かれますが、必要であれば新しく作成してください。本記事では手順を簡略化するため、先ほど取得した接続情報のユーザーを使用します。

新しくユーザーを作成しない場合は、AWSのユーザー作成ページにリダイレクトされますが、無視してVisual Studio Codeに戻ってください。Visual Studio Codeに戻ったら、エンターを押して次に進みます。

アクセスキーとシークレットキーの入力を求められたら、先ほど入力した情報を再度入力してください。新しくユーザーを作成した場合は、そのユーザーから取得した情報を入力します。

次に、プロファイル名を入力します。aws configureを実行した際に特にプロファイル名を指定していませんので、defaultと入力します。

? Profile Name:

これで設定が完了しました。

初期プロジェクトの作成

Amplifyのプロジェクトを作成します。次のコマンドを実行してください。

amplify init

このコマンドでもいくつか質問がされますので、次の内容参考に回答してください。

? Enter a name for the project (reactsample)

プロジェクト名を決めます。変更したい方は変更してからエンターを押します。

? Initialize the project with the above configuration? (Y/n)

前に表示された内容で環境を作成するかどうか聞かれます。今回はそのままエンターを押します。

? Select the authentication method you want to use: (Use arrow keys)
❯ AWS profile 
  AWS access keys

認証情報に使用するものを聞かれています。AWS profileを選択してエンターを押します。

? Please choose the profile you want to use (Use arrow keys)
❯ default

使用するプロファイルを聞かれています。defaultが選択されていることを確認してからエンターを押します。

Cloud Formationが実行されます。途中で次の質問が表示されます。

? Help improve Amplify CLI by sharing non-sensitive project configurations on failures (y/N)

こちらは、生涯レポートを送信するような機能ですので、好きな方を選択してエンターを押します。

これで準備完了です。

おわりに

今回はこれからAmplifyを使って開発を進めていくための内容でお送りしました。次回は、実際に認証機能などを追加しながらアプリケーション開発に必要なバックエンド機能を追加する方法について紹介します。

とことんDevOps | 日本仮想化技術のDevOps技術情報メディア

DevOpsに関連する技術情報を幅広く提供していきます。