在Docker上搭建Next.js + Nginx服务器的经历

首先

数个月前，我使用Docker构建了Next.js的生产环境。但是，由于我在主机上搭建了Nginx，所以不得不每次都在服务器上编写Nginx的配置，这导致了一些问题。

因此，我們決定在這次使用Docker構建Next.js服務器的同時，還要添加Nginx服務器。

目录结构

- root
  - nginx # new!
    - Dockerfile
    - nginx.conf
  - node_modules
  - public
  - src
  ...
  - docker-compose.yml
  - Dockerfile
  - package.json
  - yarn.lock

Nginx相关设置

server {
  listen 80;
  server_name www.example.com;

  location / {
    proxy_pass http://app:4400; # appはNextサーバーの名前
    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;
  }
}

Docker的配置设置

FROM nginx:alpine

RUN rm -f /etc/nginx/conf.d/*

ADD nginx.conf /etc/nginx/conf.d/portfolio.conf

CMD /usr/sbin/nginx -g 'daemon off;'

version: '3'

services:
  app:
    container_name: next-app
    image: next-app
    build:
      context: .
      dockerfile: Dockerfile
    restart: always

  nginx:
    container_name: next-app-nginx
    build:
      context: ./nginx
      dockerfile: Dockerfile
    ports:
      - {好きなポート番号}:80
    depends_on:
      - app

最后

现在我们可以省略在主机上写nginx配置文件了。下次我打算将用于Rails服务器的Nginx服务器迁移到Docker。