👾
Next.jsプロジェクト環境構築手順🚀
主の環境
・Windows 11
前提
・GitHubアカウントが作成されていること
・Git環境が整っていること
・Dockerアカウントが作成されていること
1. リポジトリの作成
1-1. GitHubにログイン
GitHubにアクセスして、ログイン→リポジトリを作成する。
※今回はPrivateリポジトリを作成
1-2. リポジトリのクローン
Git Bashを起動し、任意のディレクトリへ移動する。
cd <任意のディレクトリ>
リポジトリをクローンする。
git clone https://github.com/<ユーザーID>/<リポジトリ名>.git
2. ディレクトリの作成
2-1. ディレクトリ構成
root/
├─ .git
├─ app/
│ └─ <Next.jsプロジェクト>
├─ docker-compose.yml
├─ Dockerfile
└─ .dockerignore
2-2. ファイルとディレクトリの作成
2-1と同じになるように不足しているファイルとディレクトリを作成する。
2-3. 各種ファイル設定
root/docker-compose.yml
docker-compose.yml
version: "3.8"
services:
#フロントエンド
frontend:
#Dockerfileのパス
build:
context: .
dockerfile: Dockerfile
#イメージ名
image: goshuin-front
#コンテナ名
container_name: goshuin-front
#localのport:3000をcontainerのport:3000にマッピング
ports:
- "3000:3000"
#データの同期
volumes:
- ./app:/app
#明示的に stop がされない限り、終了ステータスに関係なく常に再起動が行われる
restart: always
#コンテナの標準出力をホスト側の標準出力につなげる
tty: true
#ホスト側の標準出力をコンテナの標準出力につなげる
stdin_open: true
#typescriptでのホットリロード設定
environment:
- WATCHPACK_POLLING=true
#frontend-backend感をつなぐネットワーク
networks:
- goshuin-frontend-network
networks:
goshuin-frontend-network:
#ブリッジとしてつなぐ
driver: bridge
root/Dockerfile
Dockerfile
FROM node:20.11.0-alpine3.18
#app直下をワークディレクトリに設定
WORKDIR /app
#package.json package-lock.jsonをコンテナ内のappディレクトリにコピー
COPY package*.json ./
#依存関係をインストール
RUN yarn install
#localのデータをcopyする
COPY . .
CMD ["npm", "run", "dev"]
root/.dockerignore
.dockerignore
./app/node_modules
3. Next.jsプロジェクトの作成と初期設定
3-1. プロジェクトの作成
appディレクトリに移動する。
terminal
cd app
プロジェクトの作成。
terminal
npx create-next-app ./ --ts
Next.jsプロジェクト作成時の質問に対する回答は以下の通り。
terminal
√ Would you like to use ESLint? ... No / Yes #Yesを選択
√ Would you like to use Tailwind CSS? ... No / Yes #Noを選択
√ Would you like to use `src/` directory? ... No / Yes #Yesを選択
√ Would you like to use App Router? (recommended) ... No / Yes #Yesを選択
√ Would you like to customize the default import alias (@/*)? ... No / Yes #Yesを選択
√ What import alias would you like configured? » @/* #デフォルトのままEnter
3-2. ESLintの設定
パッケージをインストールする。
terminal
npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks --save-dev
.eslintrc.jsonを開き、以下の通りに編集する。
.eslintrc.json
{
"env": {
"browser": true,
"es2021": true
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"settings": {
"react": {
"version": "detect"
}
},
"plugins": ["react", "react-hooks", "@typescript-eslint"],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"plugin:prettier/recommended"
],
"rules": {
"react/props-types": 0,
"react/react-in-jsx-scope": 0,
+ "prettier/prettier": [
+ "error",
+ {
+ "endOfLine": "auto"
+ }
+ ]
}
}
package.jsonを開き、scripts内に以下を追記する。
package.json
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
- "lint": "next lint",
+ "lint": "eslint --ext .ts,.tsx src",
+ "lint:fix": "eslint --ext .ts,.tsx src --fix"
},
3-3. Prettierの設定
パッケージをインストールする。
terminal
npm install eslint-config-prettier eslint-plugin-prettier --save-dev
appディレクトリ直下に.prettierrc.jsonを作成し、以下を追記する。
.prettierrc.json
{
"tabWidth": 2,
"trailingComma": "es5",
"semi": false,
"singleQuote": true
}
package.jsonを開き、scripts内に以下を追記する。
package.json
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint --ext .ts,.tsx src",
"lint:fix": "eslint --ext .ts,.tsx src --fix",
+ "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json,css}'"
},
4. 必要パッケージのインストール
4-1. npm-run-allのインストール
npm-run-allをインストールして、scriptを順次実行できるようにする。
以下のコマンドを実行してインストールする。
terminal
npm install npm-run-all --save-dev
package.jsonを開き、scripts内に以下を追記する。
package.json
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint --ext .ts,.tsx src",
"lint:fix": "eslint --ext .ts,.tsx src --fix",
"format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json,css}'",
+ "test-all": "run-s lint format lint:fix"
},
以下のコマンドを実行して、script実行確認をする。
terminal
npm run test-all
lint, format, lint:fixが実行されていればOK。
4-2. local-ssl-proxyのインストール
local-ssl-proxyをインストールして、ローカル環境でもHTTPSで接続できるようにする。
以下のコマンドを実行してインストールする。
terminal
npm install local-ssl-proxy --save-dev
4-3. mkcertのインストール→証明書の作成
以下のサイトを参考にサーバ証明書を作成する。
作成した証明書（localhost.pem, localhost-key.pem）をsrcディレクトリ直下に配置する。
package.jsonを開き、scripts内に以下を追記する。
package.json
"scripts": {
"dev": "next dev",
+ "dev:local": "run-p dev proxy",
"build": "next build",
"start": "next start",
+ "proxy": "local-ssl-proxy --key localhost-key.pem --cert localhost.pem --source 3443 --target 3000",
"lint": "eslint --ext .ts,.tsx src",
"lint:fix": "eslint --ext .ts,.tsx src --fix",
"format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json,css}'",
"test-all": "run-s lint format lint:fix"
},
5. Dockerコンテナの起動
5-1. コンテナのビルド
docker-compose.ymlが存在するディレクトリへ移動する。（手順通りであれば1つ上の階層）
terminal
cd ..
以下のコマンドを実行して、コンテナをビルドする。
terminal
docker compose build
5-2. コンテナの起動
以下のコマンドを実行して、コンテナを起動する。
terminal
docker compose up
以下のURLにアクセスして、表示ができればOK。
http://localhost:3443
5-3. コンテナの停止
以下のコマンドを実行して、コンテナを停止する。
terminal
docker compose down
6. リモートリポジトリへpush
6-1. Git Bashを起動
Git Bashを起動し、リポジトリへ移動する。
6-2. ステージングエリアに追加（git add）
変更分をステージングエリアに追加する。
bash
git add <target file or directory>
6-3. 変更分のコミット（git commit）
ステージングエリアの資源をコミットする。
bash
git commit
エディタが開かれるので「i」を押下し、編集モードにする。
↓
コミットメッセージを入力したらEsqキーを押下し、編集モードを終了する。
↓
「:wq」を入力し、Enterキーを押下することでコミットされる。
6-4. 変更分のプッシュ（git push）
コミット内容をリモートリポジトリへプッシュする。
bash
git push origin <branch name>
Discussion