何ができるようになるのか
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検証が便利で圧倒的おすすめ。
4.AWS - S3
Next.jsのビルド成果物を保存するためのS3バケットを作成。
(パブリックアクセスを許可する場合は、バケットポリシーを設定する必要あり)
5.AWS - CloudFront
ここも飛ばしてもいいんだけどおすすめ
4-1.オリジン指定:
S3さっきのバケットを指定
4-2.オリジンアクセス設定:
CloudFrontからさっきのS3バケットにアクセスできるよう権限を設定。
4-3.OAI:
S3バケットポリシーにOAIを許可する設定を追加だ！
その他
キャッシュポリシーの設定やエラーページの設定、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.あとがき
おめでとう！！！ここまで長かったけど、頑張った君は幸せになれるぜ！
自動化最高！！！