如何使用 docker 部署 React (NextJS) 项目？答案

【问题标题】：How to deploy React (NextJS) project with docker?如何使用 docker 部署 React (NextJS) 项目？
【发布时间】：2019-05-21 07:43:29
【问题描述】：

我将使用 docker 部署我的项目。但我不确定要在 docker 中放置哪些文件夹。这些是我的文件夹；

.next
actions
api
components
constants
helpers
node_modules
pages
reducers
static
stores
.gitignore
next.config.js
package-lock.json
package.json
README.md
routes.js
server.js

我应该将上述哪些文件夹和文件放入 docker？我应该如何在 package.json 中有一块块？我的脚本文件目前是；

"scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  }

我目前正在使用“npm run build && npm run start”进行部署，但是每个页面都重新编译，这似乎是性能损失。

【问题讨论】：

添加一个 .dockerignore: node_modules

标签： reactjs docker deployment

【解决方案1】：

首先创建dockerignore文件添加 a.dockerignore

node_modules
.next
npm-debug.log

dockerfile 内容

FROM node:alpine
    # Create app directory
    RUN mkdir -p /usr/src/app
    WORKDIR /usr/src/app
    # Install app dependencies
    COPY package.json /usr/src/app/
    RUN npm install
    # Bundle app source
    COPY . /usr/src/app
    RUN npm run build
    EXPOSE 3000
    CMD [ "npm", "start" ]

【讨论】：

【解决方案2】：

基于浏览器的应用程序与 Docker 的容器化系统有点正交。在典型的生产使用中，您将使用Webpack 之类的工具将您的应用程序编译为静态文件。然后没有任何东西在本地实际运行您的应用程序代码；相反，像 Nginx 这样的 HTTP 服务器会在不知道它们是什么的情况下将编译后的工件提供给浏览器。

就 Docker 而言，您可以将包含已编译工件的 dist 之类的目录挂载到一个普通的 Web 服务器容器中：

npm install
npm run build
sudo docker run -v $PWD/dist:/usr/share/nginx/html -p 8080:80 nginx

由于编译后的代码在浏览器中而不是在 Docker 中运行，它不能利用容器间 DNS 之类的东西（浏览器不知道 Docker 的存在，并且必须与外部可见的主机名对话）。而且由于您最终会生成一个独立的编译工件，因此您并没有真正从在 Docker 中运行工具链中获得任何好处。在开发过程中，我只是在主机上npm run start，根本不涉及 Docker。

【讨论】：