LoginSignup
1
0

More than 1 year has passed since last update.

0からNextJS+Tailwind+AWS Amplify環境を立ち上げる

Posted at

ハードウェア環境

  • MacBook Pro (13-inch, M1, 2020)
  • Memory 16GB
  • MacOS Big Sur

開発環境

インストールと設定方法は下記リンクで確認できる。
- NodeJS v16.9.1
- NPM v7.24.0
- yarn v1.22.11
- VSCode v1.60.2
- AWSアカウント(IAMユーザー)

Amplifyの設定

インストール

$ yarn add global @aws-amplify/cli

設定

$ amplify configure

Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue

# ここからAWSに飛ばされるので、ログインしてから戻ってEnterを押す

Specify the AWS Region
? region:  ap-northeast-1
Specify the username of the new IAM user:
? user name:  <新しいユーザーネーム>
Complete the user creation using the AWS console
https://console.aws.amazon.com/iam/home?region=ap-northeast-1#/users$new?step=final&accessKey&userNames=test&permissionType=policies&policies=arn:aws:iam::aws:policy%2FAdministratorAccess
Press Enter to continue
# またAWSに飛ばされるので、IAMユーザーを作成してから戻ってEnterを押す
# アクセスキーだけ選択して、権限はAdministratorAccessを選択
# 作成されたユーザーのアクセスキーとシークレットキーを下にペーストしていく
# 既存のIAMユーザーを使用したい場合は、そのままEnterを押して、ユーザーのキー情報を下にペーストする


Enter the access key of the newly created user:
? accessKeyId:  ***************************************
? secretAccessKey:  ************************************
This would update/create the AWS Profile in your local machine
? Profile Name:  default

Successfully set up the new user.

NextJS+Tailwindで新しいプロジェクトを作成

  • 開発するディレクトリに移動
$ npx create-next-app -e with-tailwindcss <プロジェクト名>
$ cd <プロジェクト名>
$ yarn dev

ローカル環境はhttp://localhost:3000で立ち上がるはず。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0