こんにちは。山田です。
今 回は、AWS Copilot CLI を使って SPA をデプロイする方法を紹介したいと思います。
AWS Copilot CLI は、コンテナベースのアプリケーションや SPA を簡単にデプロイできるツールで、
ほぼコーディングなしでアプリケーションに必要なインフラを構築してデプロイできるので個人的にとても好きなツールです。
今回は SPA をデプロイする方法について紹介したいと思います。
事前準備
まずは AWS Copilot CLI をインストールします。
$ brew install aws/tap/copilot-cli
インストールが完了したら、copilot コマンドが使えるようになります。
$ copilot --version
copilot version: v1.34.0
次に SPA のプロジェクトを作成していきます。
SPA は Remix で作ろうと思うので、公式の SPA テンプレートを使ってプロジェクトを作成します。
$ mkdir spa
$ cd spa
$ npx create-remix@latest --template remix-run/remix/templates/spa
プロジェクト作成後のディレクトリはこんな感じになっていると思います。
$ tree -a -L1
.
├── .eslintrc.cjs
├── .gitignore
├── README.md
├── app
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
├── tailwind.config.ts
├── tsconfig.json
└── vite.config.ts
4 directories, 9 files
AWS Copilot CLI のコンセプト
後はデプロイするだけなんですが、デプロイ前にいくつか手順があるので概念の説明もしておこうと思います。
まず、Copilot には「Application」、「Environment」、「Service」の 3 つの概念があります。（Job と Pipeline も含 めると 5 つ）
名前の通りではあるのですが、Application はそのアプリケーション全体を指し、Environment はアプリケーションをデプロイする環境（本番、検証など）、
Service はアプリケーションの中で動くサービス（API、フロントエンドなど）のことを指しています。
イメージ図
なので AWS Copilot CLI で環境を構築する際は、まず Application を作成して、その中に Environment を作成し、さらにその中に Service を作成していくというイメージを持つといいと思います。
Application と Environment の作成
$ copilot app init
作成するアプリケーションの名前を聞かれるので入力します。
実行が完了するとディレクトリ内に copilot というディレクトリが作成され、.workspace というファイルが作成されます。
このファイルにはアプリケーション名が記載されています。
また、裏側では CloudFormation が動いていて、アプリケーション内で共通で利用される IAM ロールが作成されます。
次に Environment を作成します。
$ copilot env init
ここでは環境名、利用する AWS アカウントのクレデンシャル名、VPC などの設定を聞かれるので入力します。
実行が完了すると copilot ディレクトリ内に environment の構成ファイル manifest.yml が保存されます。
また、この時裏側では CloudFormation によって、S3 バケットや KMS キーなどが作成されます。
この時作成される設定ファイルは以下のようになっています。
コマンド実行した時に聞かれる質問で network 設定をデフォルトにしているためコメントアウトされていますが、項目に設定を追加することで既存の VPC 上に環境を作成することも可能です。
# The manifest for the "staging" environment.
# Read the full specification for the "Environment" type at:
# https://aws.github.io/copilot-cli/docs/manifest/environment/
# Your environment name will be used in naming your resources like VPC, cluster, etc.
name: staging
type: Environment
# Import your own VPC and subnets or configure how they should be created.
# network:
# vpc:
# id:
# Configure the load balancers in your environment, once created.
# http:
# public:
# private:
# Configure observability for your environment resources.
observability:
container_insights: false
ちょっと混乱するかもですが、app 以外のcopilot xxxx initは基本的に構成ファイルを作成するためのコマンドなので init とは別に deploy コマンドを使って構成を反映させる必要があります。
$ copilot env deploy
実行すると、manifest ファイルに記載された構成が反映されて VPC などのリソースが作成されます。
CloudFormation のスタックを見ると deploy 実行後にリソースが追加されていることが確認できると思います。
Service（SPA）のデプロイ
それでは準備が整ったので SPA をデプロイしていきます。
まず Remix のビルドを行います。
$ npm run build
ビルドが完了すると、build/client ディレクトリにビルドされたファイルが出力されます。
次に Service を作成します。
$ copilot svc init
Load Balanced Web Service などデプロイ構成の選択肢が出てくるので、Static Site を選択します。
次にサービス名を聞かれるので適当な名前を入力します。今回は remix とします。
次にビルドした静的ファイルのディレクトリを聞かれるので build/client を入力します。
実行が完了すると copilot ディレクトリ内に service の構成ファイル manifest.yml が保存されます。
# The manifest for the "remix" service.
# Read the full specification for the "Static Site" type at:
# https://aws.github.io/copilot-cli/docs/manifest/static-site/
# Your service name will be used in naming your resources like S3 buckets, etc.
name: remix
type: Static Site
files:
- source: build/client
recursive: true
# You can override any of the values defined above by environment.
# environments:
# test:
# files:
# - source: './blob'
# recursive: true
# destination: 'assets'
# exclude: '*'
# reinclude:
# - '*.txt'
# - '*.png'
それではデプロイコマンドを実行します。
$ copilot svc deploy
実行すると、environment deploy で作成された staging 環境に remix サービスがデプロイされます。
裏側では CloudFormation によって S3 や CloudFront といったリソースが作成され、ビルドした静的ファイルが S3 にアップロードされます。
デプロイが完了すると CloudFront の URL がコンソールに表示されるので、ブラウザでアクセスすると Remix にアクセスできます。
以上、AWS Copilot CLI を使って SPA をデプロイする方法について紹介しました。
ちょっと長くなってしまいましたがイメージさえ掴めれば使い心地は非常に良いので、とてもおすすめです。
ご覧いただきありがとうございました！
余談
実は AWS Copilot CLI の最終リリースが 6 月 27 日となっていて、しばらく更新がありません 😭
メンテナンスモードに移行したという噂もあり今後の動きが気になるところです。