记一次react+node+nginx+mysql+docker发布

简言

这是为了给老婆工作上算培训班课时，计算课销更方便点的CRM（纸质档转线上）

准备工作

1. React项目
2. Node项目（express，koa任意选择）
3. 一台服务器（如果你是纯手工发布，服务器选择倒是无所谓，如果要结合docker的话，请选择国外服务器或者香港也行，阿里云就算了，我自己最开始用的阿里云，docker根本pull不下来，客服给我说懂的都懂）

服务器准备

当你准备好服务器后，请按照以下程序执行

1. 使用root账户和登录密码登录服务器
   

因为登录时输入密码是不可见的，因此建议使用Ctrl+C Ctrl+V将密码复制上去，然后回车登录

2. 此时本地主机中 在.ssh目录下执行ssh-keygen -R 服务器IP，生成ssh秘钥，这一步是为了后续禁用密码登录，使用本机ssh登录更安全，成功后目录下会出现known\_hosts.old
   
3. 执行ssh-copy-id root@服务器IP,将本地公钥复制到服务器的ssh权限目录下
   
4. 禁用密码登录，在远程服务器上执行vim /etc/ssh/sshd_config，设置
   
   然后保存
5. 执行service sshd restart重启配置
6. 然后关闭远程面板或者命令行工具，重新打开命令行工具，执行ssh root@服务器IP，此时可以发现不用输入密码便可以登录服务器
7. 执行apt update，更新包索引的命令。它的作用是从配置的包仓库中获取最新的软件包信息，以便后续安装、升级和删除操作。
8. 执行apt install docker.io以及apt install docker-compose，安装docker以及docker-compose用于启用docker以及编排后续的docker容器

到此为止服务器基本配置就已完成

项目准备

1. 检查当前服务器上是否有git(使用命令git)，如果没有的话，请执行apt install git
2. 将服务器上的ssh公钥复制到你的github或者gitlab的公钥设置处，服务器公钥存放目录~/.ssh/,然后执行命令ssh-keygen，选择后缀名为.pub的文件查看，我这里执行cat id_rsa.pub，然后把查看到的公钥串
   

复制到github或者gitlab的公钥串配置处，添加，然后就可以通过ssh的方式，将远程仓库的代码拉到服务器本地了

3. 我这里在/opt目录下新建project目录,mkdir project
   
4. 然后在project目录下(git clone)拉取我的前端React项目以及后端Node项目
   
5. 在本文档中，创建docker-compose.yml，这个文件用于编排docker容器，且只能叫这个名字，后缀可以改成.yaml

version: '3.8'
services:
  mysql:
    image: mysql:5.7
    container_name: mysql
      MYSQL_USER: user
      MYSQL_PASSWORD: 970314
    ports:
      - "3306:3306"
    volumes:
      - /srv/docker/mysql/data:/var/lib/mysql                   # 数据文件映射
      - /srv/docker/mysql/logs:/var/log/mysql                   # 日志文件映射
    networks:
      - niumu-network

  node:
    build: ./niumu-backend
    ports:
      - "3000:3000"
    depends_on:
      - mysql     # 依赖 MySQL
    container_name: node_backend_container
    environment:
      - NODE_ENV=production
    networks:
      - niumu-network

  nginx:
    build: ./niumu-art
    ports:
      - "8080:8080"
    depends_on:
      - node     # 先依赖 node
    container_name: react_nginx_container
    volumes:
      - /var/log/nginx/access.log:/var/log/nginx/access.log
      - /var/log/nginx/error.log:/var/log/nginx/error.log

volumes中如果从容器中映射到服务器的目录和文件没有的话就自己创建(:左边是映射到的服务器目录，右边为docker容器目录)

这里使用了build，因此容器构建的时候会根据build指向的目录下的Dockerfile文件中的命令执行

niumu-art下Dockerfile文件

# 使用官方的 Node 镜像作为构建阶段
FROM node:18 AS build

# 设置工作目录
WORKDIR /app

# 复制 package.json 和 package-lock.json
COPY package*.json ./

# 安装依赖
RUN npm install

# 复制整个项目到工作目录
COPY . .

# 构建 React 项目
RUN npm run build

# 使用 Nginx 作为生产阶段的基础镜像
FROM nginx:alpine

# 将 Nginx 配置文件复制到容器中
COPY nginx.conf /etc/nginx/nginx.conf

# 删除默认的 Nginx 静态文件，并替换为构建好的 React 静态文件
RUN rm -rf /usr/share/nginx/html/*

# 复制 React 构建的静态文件到 Nginx 目录
COPY --from=build /app/dist /usr/share/nginx/html

# 暴露端口 8080
EXPOSE 8080

# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]

niumu-art下nginx.conf文件

# Nginx 配置文件示例

# 定义用户和工作进程
worker_processes  auto;


# 定义事件
events {
    worker_connections  1024;
}



# 定义 http 设置
http {
    # 定义错误日志和访问日志
    error_log  /var/log/nginx/error.log;
    access_log  /var/log/nginx/access.log;

    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    # 定义日志格式
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    sendfile        on;
    keepalive_timeout  65;


    upstream backend {
        server 服务器IP地址:3000;
    }

    # 服务器配置
    server {
        listen       8080;  # 监听 80 端口
        server_name  服务器IP地址;  # 修改为你的域名

        location / {
            root   /usr/share/nginx/html;  # 静态文件目录
            try_files $uri /index.html;
        }

        location /api {
            proxy_pass http://backend;  # 反向代理到后端 API
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }

        # 错误页面
        # error_page  404 /404.html;
        # error_page  500 502 503 504 /50x.html;

        # location = /50x.html {
        #     root   /var/www/html;
        # }
    }
}

niumu-backend下Dockerfile文件

# 使用官方的 Node 镜像作为基础镜像
FROM node:18

# 设置工作目录
WORKDIR /app

# 复制 package.json 和 package-lock.json
COPY package*.json ./

# 安装 PM2
RUN npm install pm2 -g

# 安装依赖
RUN npm install

# 复制项目文件到工作目录
COPY . .

# 暴露端口 3000
EXPOSE 3000

# 启动应用
CMD ["sh", "-c", "pm2-runtime start ./ecosystem.config.js"]

ecosystem.config.js创建在node项目根目录下

module.exports = {
  apps: [
    {
      name: "app",
      script: "./src/main.js", // 这里写node启动的文件
    },
  ],
};

构建并运行docker容器

回到/opt/project目录，执行docker-compose up -d，此时开始拉取Dockerfile和docker-compose.yml中指定的服务镜像，并根据镜像构建容器，构建完容器后，建立工作区，并执行Dockerfile中前端的打包构建或后端服务启动的命令

当前端nginx服务启动完成，node后端服务启动完成，mysql服务启动完成，那么就可以进行线上访问了

结果

nginx监听的端口为8080，因此就访问http://你的服务器IP:8080

注意

请求接口操作数据库前，一定要检查自己有没有建表，查看线上数据库可以使用一些数据库图形化软件(我用的DBeaver),连接线上数据库

感谢

1. B站教nodejs搭后台的的某UP
2. 当前这家公司的运维大哥提供的运维支持
3. 上家公司给我抽象数据表的大哥
4. 感谢老婆对服务器购买的资金支持