何ができるようになるのか
v0でモックアップ作れるのはすごいけど、
本番上げるの簡単じゃない。
だから簡単にしてみた！
以下がコマンド一撃でできちゃうぜ。
| 項目 | 解説 |
|---|---|
| Next.jsのビルド |
npm run build コマンドを実行して、Next.jsプロジェクトをビルドし、静的ファイルを生成。 |
| デプロイ先の切り替え | ステージング環境と本番環境など、複数のデプロイ先を切り替える機能つき！ |
| ロールバック | デプロイに失敗した場合に、以前のバージョンにロールバック！ |
| S3へのデプロイ |
aws s3 sync コマンドを実行して、ビルドされた静的ファイルをS3バケットにアップロードします。 --delete オプションを指定することで、S3バケットに存在するがローカルにはないファイルを削除し、常に最新の状態を維持。 |
| CloudFrontキャッシュの削除 | CloudFrontのキャッシュ削除をいちいちコンソールからやってられるかよ！自動化しといたぜ！？ |
| セキュリティスキャン | 静的セキュリティスキャンや依存関係の脆弱性スキャンを実行して、セキュリティリスクだって早期に検出！ |
もちろんバージョン管理したいよな！安心してくれ！GitHub経由だ！
前提
Mac, v0, AWS, github(GithubActions), Next.js 使ってる人向け。
1.v0からソースコードをローカルに落とす
わかってるだろうから読み飛ばしていいぜ！
1-1. v0の右上にadd to Codebaseってボタンがあるので、それをクリック
1-2.すると、npx shadcn@latest add "URL" ってのがコピーできるセクションが出てくるのでコピー
1-3.ローカルのターミナルから任意のディレクトリ上で先のnpxコマンドを実行。
2.AWS - Route53
なんでもいいけどドメイン取得。安いところいろいろあるけど
管理の手間を考えるとAWSでやるのが良いと思うな、、、。
3.AWS - ACM
飛ばしてもいいけど証明書取得。
絶対にリージョンをus-east-1にすること！
SSL/TLS証明書のリクエスト: ACMを使用して無料のSSL/TLS証明書をリクエスト。
ドメインの検証: DNS検証（Route 53を使用している場合は自動化が容易）またはメール検証を行う。
DNS検証が便利で圧倒的おすすめ。
| 項目 | 解説 |
|---|---|
| RSA 2048 | RSA 2048 は 2030 年までに安全ではなくなると予測されており、ECDSA への移行が推奨される。 |
| ECDSA P 256 | 十分な強さでRSA2048より軽い。おすすめ |
| ECDSA P 384 | 強いけど重い |
4.AWS - S3
Next.jsのビルド成果物を保存するためのS3バケットを作成。
バケットポリシー
└ パブリックアクセスを削除し、CloudFrontのOAI（Origin Access Identity）からのみアクセスを許可
5.AWS - CloudFront
S3さっきのバケットを指定
*S3バケットをオリジンに設定する場合、S3の「静的ウェブサイトホスティング用エンドポイント」ではなく、「バケット名.s3.amazonaws.com」の形式の通常エンドポイントを使用すること！
メッセージとして「Webサイトエンドポイントを使うことをおすすめします」と出てくるはず、S3バケットで「静的ウェブサイトホスティング」を有効にしている場合、.s3-website-.amazonaws.com の形式を使うとS3がindexドキュメントやエラーページを返してくれるためだ。
しかし、CloudFrontを介してHTTPS化する際は、基本的に「通常のS3エンドポイント」を選択する方が望ましい。なぜなら、s3-website-で始まるウェブホスティング用のエンドポイントはHTTPSに対応していない。CloudFront経由の完全なHTTPS接続を行うには通常エンドポイントを選択し、CloudFront側でHTTPS終端を行うのがセオリーなのだ。
・Supported HTTP versions
HTTP3を設定してあげると動画関連が高速化するらしい。
・Default Root Object
こだわりがなければ'index.html'を指定しよう。
CloudFrontからさっきのS3バケットにアクセスできるよう権限を設定。
ポリシーをコピーして「S3バケットアクセス許可」に移動。
・エラーページを設定
6.S3に移動:
S3バケットポリシーに、先ほどコピーしたOAIを許可する設定を追加だ！
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AllowCloudFrontAccess",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity YOUR_OAI_ID"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::<ドメイン名>/*"
}
]
}
そして、「パブリックアクセスをブロック」設定をオンにする。
7.Route53へ移動
AレコードをCloudFront distribution(********.cloudfront.net)にエイリアスする
その他
キャッシュポリシーの設定やエラーページの設定、WAF、ACMとかはお好みで！
ACMの設定した人はHTTP3を選択するのもおすすめ！
6.AWS - IAM
ユーザーを作り、権限 AmazonS3FullAccess, CloudFrontFullAccess を付与する。
アクセスキーIDとシークレットアクセスキーは、一度表示されたら二度と表示されないので必ず保管してくれよな！
7.GitHub Actionsのワークフローファイルを作成
プロジェクトルートディレクトリ下に以下の階層とファイルをつくってくれ！
.github/workflows/deploy.yml
以下のソースコードをベースに
さっきつくったキミの情報に合わせて書き換えてくれれば簡単だ！
この記事で一番価値がある部分さ！
deploy.yml の中身
name: Deploy to S3
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v2
- name: Install dependencies
run: npm install
- name: Build project
run: npm run build
- name: Configure AWS credentials
uses: aws-actions/configure-aws-credentials@v1
with:
aws-access-key-id: ${{ 自分のアクセスキーのID }}
aws-secret-access-key: ${{ 自分のシークレットアクセスキーのID }}
aws-region: ap-northeast-1
- name: Deploy to S3
run: aws s3 sync ./out s3://studio-ao.tokyo --delete
- name: Invalidate CloudFront Cache
run: aws cloudfront create-invalidation --distribution-id 自分のCloudFrontのディストリビューションID --paths "/*"
8.GitHub設定
GitHubリポジトリにmainブランチを作成してローカルのプロジェクトルートディレクトリに紐づける。この記事読むレベルの人は以下わかってると思うので読み飛ばしていい。AIが書いてくれたぜ！
ローカルリポジトリとGitHubリポジトリを紐づける手順
GitHub Actions を利用するには、ローカルリポジトリとGitHubのリモートリポジトリを紐づける必要があります。以下の手順に従って設定しましょう。
8-1. ローカルリポジトリの初期化
プロジェクトルートディレクトリで以下のコマンドを実行し、ローカルリポジトリを初期化します。
git init
8-2. リモートリポジトリの追加
以下のコマンドを実行し、GitHubで作成したリポジトリを origin という名前でリモートリポジトリとして追加します。
git remote add origin <リモートリポジトリのURL>
<リモートリポジトリのURL> は、GitHubのリポジトリページで確認できます。
8-3. 変更をコミット
以下のコマンドを実行し、変更をステージングエリアに追加します。
git add .
その後、コミットメッセージを付けてコミットします。
git commit -m "初期コミット"
8-4. リモートリポジトリにプッシュ
以下のコマンドを実行し、ローカルの main ブランチをリモートリポジトリの main ブランチにプッシュします。
git push -u origin main
-u オプションを付けることで、ローカルの main ブランチとリモートの main ブランチをトラッキングするように設定します。
これで、ローカルリポジトリとGitHubのリモートリポジトリが紐づけ完了だぜ！
9.GitHubリポジトリにシークレットを登録
GitHubリポジトリのSettings > Secrets and variables > Actions に、
さっきのAWSアクセスキーIDとシークレットアクセスキーを登録するんだ。
👇ここだよ！
10.コマンド
以下のコマンドを打つだけで、自動的にビルドandデプロイandキャッシュ削除してくれるのだ！
git add . && git commit -m "変更内容の文章" && git push origin main
黄色いクルクルが緑に変わったらデプロイ成功だぜ！？
くぅ！気持ちいい！
11.あとがき
おめでとう！！！ここまで長かったけど、頑張った君は幸せになれるぜ！
自動化最高！！！