自作鯖のNextプロジェクトを独自ドメインで公開する方法

STEP 1: DockerとDocker Composeのインストール

sudo apt-get update
sudo apt-get install -y docker-ce docker-ce-cli containerd.io
sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
sudo apt-get update
sudo apt-get install -y docker-compose

# Docker Compose Pluginのインストール（不要ならば省略可）
sudo apt-get install -y docker-compose-plugin

# インストール確認
docker compose version

STEP 2: Next.jsアプリケーションのセットアップ

npx create-next-app next-app
cd next-app

Next.jsアプリケーションのルートディレクトリにDockerfileを作成します。

Dockerfile
# Use an official Node.js runtime as a parent image
FROM node:18.17.0

# Set the working directory in the container
WORKDIR /usr/src/app

# Copy package.json and package-lock.json to the working directory
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the local source files to the container
COPY . .

# Build the application
RUN npm run build

# Expose port 3000
EXPOSE 3000

# Command to run the application
CMD ["npm", "start"]

ビルドとコンテナの起動:

docker build -t next-app .
docker run -p 3000:3000 next-app

STEP 3: Nginxの設定
新しいNginxの設定ファイル my-nextjs-app を作成:

sudo nano /etc/nginx/sites-available/my-nextjs-app
以下の内容を貼り付け、[ここにドメイン名やIPなど] を実際のドメイン名やIPアドレスに置き換えます。

server {
    listen 80;

    server_name [ここにドメイン名やIPなど];

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

シンボリックリンクの有効化:

sudo ln -s /etc/nginx/sites-available/my-nextjs-app /etc/nginx/sites-enabled/

Nginxの構文チェック:

sudo nginx -t

Nginxの再起動:

sudo systemctl restart nginx