🏞️
【Amplify全部やる】Next.jsをホスティングする
ひとりアドカレ14日目です！
これまでAmplifyをちょいちょい触ってきましたが、いっそのこと全部触ってみてどんなことが実現できるのかを全部わかってみたいと思ったので、Amplify全部やります。
まずはHostingからやっていきましょう！
今回の最終状態は以下にpushしています！
前提
- AWSコンソールにログインできること
- gitがインストールされていること
- Node.jsがインストールされていること
まずはNext.jsの雛形を作っていきます。
yarn create next-app --typescript をターミナルで実行していきましょう！
% yarn create next-app --typescript
yarn create v1.22.19
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
~省略~
success Installed "create-next-app@13.0.6" with binaries:
- create-next-app
✔ What is your project named? … allofamplify
✔ Would you like to use ESLint with this project? … No / Yes
Creating a new Next.js app in /Users/motoakitanaka/workspace/amplifyPjs/allofamplify.
Initialized a git repository.
Success! Created allofamplify at ~~~~~~~~~~~~~~~~~~~~~/amplifyPjs/allofamplify
✨ Done in 66.64s.
ローカルで初期画面を確認しましょう。
プロジェクトディレクトリで yarn dev を実行し、http://localhost:3000 にアクセスしてみましょう！
% cd allofamplify
% yarn dev
yarn run v1.22.19
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 1194 ms (161 modules)
wait - compiling / (client and server)...
event - compiled client and server successfully in 283 ms (187 modules)
以下の画面が確認できるはずです。
ソースコントロールのために、GitHubにpushしておきましょう。
% git init
% git remote add origin https://github.com/theMistletoe/allofamplify.git
git branch -M main
git push -u origin main
Enumerating objects: 20, done.
Counting objects: 100% (20/20), done.
Delta compression using up to 8 threads
Compressing objects: 100% (18/18), done.
Writing objects: 100% (20/20), 49.22 KiB | 9.84 MiB/s, done.
Total 20 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/theMistletoe/allofamplify.git
* [new branch] main -> main
branch 'main' set up to track 'origin/main'.
ではAmplifyを触っていきます。
AmplifyHostingの方から「使用を開始する」で進めましょう。
先程作成したGitHubリポジトリにアクセス権限を求められるので、求められるままに許可してリポジトリを選択します。
基本的には中の設定値をいじることなく「次へ」を連打することで、hostingが完了します。
デプロイ完了後にローカルと同じ内容が確認できていれば成功です！
ホスティングまでは秒ですね！
ここをベースにAmplifyでできることを継ぎ足して行こうと思います！
Discussion