web_bonsaiの日記

web開発の学習日記です。誰に見せるためでもないただの日記です。

Next.jsのサービスを作り直す | Mac + Docker + Rails + Next.js その0049

web_bonsai m1_mac_docker_nextjs

参考にさせていただいたページ

参考にした過去記事

はじめに

久しぶりに触ったらコードも良くないし、Next.jsをはじめとして、色々とパッケージが古いのでディレクトリごと作成しなおします。

npx create-next-app@latest --ts する

frontendディレクトリが既にあるので、frontend_v2ディレクトリを作成します。

npx create-next-app@latest --ts frontend_v2

対話形式で選択できる初期設定は以下の通り選択しました。

frontend_v2/Dockerfileの作成とその記述内容

vim frontend_v2/Dockerfile

以下の通り記述しました。

# Debian の slim イメージを使う
# - 色々入っている node は使わない
# - alpine は使わない
FROM node:20.12.2-bookworm-slim

# 環境変数を定義
ENV APP_PATH /usr/src/app

# docker-compose.yml の volumes に合わせて $APP_PATH ディレクトリを作成
RUN mkdir $APP_PATH

# ホストマシンにある package.json をコンテナ内の $APP_PATH/package.json にコピー
COPY package.json $APP_PATH/

# $APP_PATH ディレクトリでコマンド実行
WORKDIR $APP_PATH
RUN npm install

docker-compose.ymlの編集とその記述内容

vim docker-compose.yml

以下の通りfrontendサービスの設定を変更します。

version: "3.9"
services:
  https-portal:
    image: steveltn/https-portal:1
    ports:
      - 10080:80
      - 10443:443
    restart: always
    environment:
      DOMAINS: 'localhost -> http://nginx:8000'
      STAGE: local
    volumes:
      - ./https_portal/ssl_certs:/var/lib/https-portal
    depends_on:
      - nginx
  nginx:
    build: ./nginx
    ports:
      - "18000:8000"
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
      - ./nginx/html:/var/www/html
      - ./nginx/log:/var/log
    depends_on:
      - frontend
  frontend:
    build:
      context: ./frontend_v2
    tty: true
    volumes:
      - ./frontend_v2:/usr/src/app
    environment:
      - WATCHPACK_POLLING=true
    command: 'npm run dev'
    ports:
      - "3001:3001"

frontend_v2/package.jsonの編集とその記述内容

package.jsonのscripts.devを以下の通り編集します。

  "scripts": {
    "dev": "next dev -p 3001",
    〜略〜
  },

ここまでやった段階でのfrontend_v2/package.jsonの記述内容は以下の通りです。

{
  "name": "frontend_v2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 3001",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.2.0"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.0"
  }
}

docker-compose build する

一度buildしてみます。

docker-compose build

docker-compose up する

upしてみます。

docker-compose up

ブラウザでNext.jsのサーバーに直接アクセスして確認してみる

以下のURLにブラウザでアクセスすると、ページが表示されます。

ブラウザでhttps-portalサービスを介してアクセスしてみる

以下のURLにブラウザでアクセスすると、ページが表示されます。