將一個react+nodejs聊天軟件前後端項目進行docker打包並運行

1概述

https://gitee.com/chuge325/practise–chat-app-react-nodejs.git
这时聊天项目的文件，前端是react技术，后端是nodejs进行编写，现在将前后端分开打包。
mongodb的docker打包运行
不想看得化直接运行也可以运行

sudo docker run -itd  -p 27017:27017 yutianchi/mymongo:1.0

2将react前端打包入docker

2.1打包react项目

执行命令yarn build进行打包，打包后项目的目录build下多出打包文件。

2.2nginx配置

创建nginx.conf文件，配置如下。如果是不打算用Docker部署，那直接修改Nginx的配置文件也可以

user  root;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    underscores_in_headers on;
    client_max_body_size   20m;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;

    keepalive_timeout  65;

    server {
        listen 3000 default_server;
        server_name _;

        location  / {
          root /usr/share/nginx/html;
          index  index.html ;
          try_files $uri $uri/ /index.html;
        }
    }
}

2.3创建Docker镜像

在react根目录创建Dockerfile文件，并写入如下内容。

FROM nginx:latest 
LABEL maintainer "yutianchi" 
ADD ./build /usr/share/nginx/html/ 
ADD ./nginx-conf/nginx.conf  /etc/nginx/ 
EXPOSE 3000

# sudo docker build -t='yutianchi/chat-app-react-public:1.0.0' .
# sudo docker run  --name  chat-app-react-public -p 3000:3000 -it -d yutianchi/chat-app-react-public:1.0.0

2.4打包和运行

sudo docker build -t='yutianchi/chat-app-react-public:1.0.0' .
sudo docker run  --name  chat-app-react-public -p 3000:3000 -it -d yutianchi/chat-app-react-public:1.0.0

2.5上传dockerhub

sudo docker login -u yutianchi
sudo docker push   yutianchi/chat-app-react-public:1.0.0

3将nodejs打包入docker

可以参考官方教程

https://nodejs.org/zh-cn/docs/guides/nodejs-docker-webapp/

Dockerfile文件

nodejs文件有package.json文件描述你应用程序以及需要的依赖：

{
  "name": "server",
  "version": "1.0.0",

  "license": "MIT",
  "main": "index.js",
  "scripts": {
    "start": "nodemon index.js",
    "test": "echo\"Error:no test specified\"&&exit 1"
  },
  "dependencies": {
    "bcrypt": "^5.0.1",
    "cors": "^2.8.5",
    "dotenv": "^16.0.2",
    "express": "^4.18.1",
    "mongoose": "^6.6.1",
    "nodemon": "^2.0.20",
    "socket.io": "^4.5.2"
  }
}

创建一个空文件，命名为 Dockerfile：

touch Dockerfile

用你最喜欢的文本编辑器打开这个 Dockerfile。

我们要做的第一件事是定义我们需要从哪个镜像进行构建。这里我们将使用最新的 LTS（长期服务器支持版），Node 的版本号为 12。你可以从 Docker 站点 获取相关镜像：

FROM node:12

下一步在镜像中创建一个文件夹存放应用程序代码，这将是你的应用程序工作目录：

# Create app directory
WORKDIR /usr/src/app

此镜像中 Node.js 和 NPM 都已经安装，所以下一件事对于我们而言是使用 npm 安装你的应用程序的所有依赖。请注意，如果你的 npm 的版本是 4 或者更早的版本，package-lock.json 文件将不会自动生成。

# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package*.json ./

RUN npm install
# If you are building your code for production
# RUN npm ci --only=production

请注意，我们只是拷贝了 package.json 文件而非整个工作目录。这允许我们利用缓存 Docker 层的优势。bitJudo 对此有一个很好的解释，请见此。 进一步说，对于生产环境而言，注释中提及的 npm ci 命令协助提供了一个更快、可靠、可再生的构建环境。欲知详情，可以参考此处。

在 Docker 镜像中使用 COPY 命令绑定你的应用程序：

# Bundle app source
COPY . .

你的应用程序绑定的端口为7000，所以你可以使用 EXPOSE 命令使它与 docker 的镜像做映射：

EXPOSE 7000

最后但同样重要的事是，使用定义运行时的 CMD 定义命令来运行应用程序。这里我们使用 node server.js 来启动你的服务器：

CMD [ "node", "index.js" ]

完整的Dockerfile

FROM node:12

# Create app directory
WORKDIR /usr/src/app

# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package*.json ./

# Bundle app source
COPY . .
EXPOSE 7000

CMD [ "node", "index.js" ]

#sudo docker build -t='yutianchi/chat-app-nodejs-server:1.0.0' .
#sudo docker run --net=host --name  chat-app-nodejs-server -p 7000:7000 -it -d yutianchi/chat-app-nodejs-server:1.0.0

.dockerignore 文件

在 Dockerfile 的同一个文件夹中创建一个 .dockerignore 文件，带有以下内容：

node_modules
npm-debug.log

这将避免你的本地模块以及调试日志被拷贝进入到你的 Docker 镜像中，以至于把你镜像原有安装的模块给覆盖了。

打包和运行

sudo docker build -t='yutianchi/chat-app-nodejs-server:1.0.0' .
sudo docker run --net=host --name  chat-app-nodejs-server -p 7000:7000 -it -d yutianchi/chat-app-nodejs-server:1.0.0

上传dockerhub

sudo docker login -u yutianchi
sudo docker push   yutianchi/chat-app-nodejs-server:1.0.0