记一次react+node+nginx+mysql+docker发布
简言
这是为了给老婆工作上算培训班课时,计算课销更方便点的CRM(纸质档转线上)
准备工作
- React项目
- Node项目(express,koa任意选择)
- 一台服务器(如果你是纯手工发布,服务器选择倒是无所谓,如果要结合docker的话,请选择国外服务器或者香港也行,阿里云就算了,我自己最开始用的阿里云,docker根本pull不下来,客服给我说懂的都懂)
服务器准备
当你准备好服务器后,请按照以下程序执行
- 使用root账户和登录密码登录服务器
因为登录时输入密码是不可见的,因此建议使用Ctrl+C Ctrl+V将密码复制上去,然后回车登录
-
此时本地主机中 在.ssh目录下执行
ssh-keygen -R 服务器IP
,生成ssh秘钥,这一步是为了后续禁用密码登录,使用本机ssh登录更安全,成功后目录下会出现known_hosts.old
-
执行
ssh-copy-id root@服务器IP
,将本地公钥复制到服务器的ssh权限目录下
-
禁用密码登录,在远程服务器上执行
vim /etc/ssh/sshd_config
,设置
然后保存 -
执行
service sshd restart
重启配置 -
然后关闭远程面板或者命令行工具,重新打开命令行工具,执行
ssh root@服务器IP
,此时可以发现不用输入密码便可以登录服务器 -
执行
apt update
,更新包索引的命令。它的作用是从配置的包仓库中获取最新的软件包信息,以便后续安装、升级和删除操作。 -
执行
apt install docker.io
以及apt install docker-compose
,安装docker以及docker-compose用于启用docker以及编排后续的docker容器
到此为止服务器基本配置就已完成
项目准备
- 检查当前服务器上是否有git(使用命令
git
),如果没有的话,请执行apt install git
- 将服务器上的ssh公钥复制到你的github或者gitlab的公钥设置处,服务器公钥存放目录
~/.ssh/
,然后执行命令ssh-keygen
,选择后缀名为.pub的文件查看,我这里执行cat id_rsa.pub
,然后把查看到的公钥串
复制到github或者gitlab的公钥串配置处,添加,然后就可以通过ssh的方式,将远程仓库的代码拉到服务器本地了
- 我这里在/opt目录下新建project目录,
mkdir project
-
然后在project目录下(git clone)拉取我的前端React项目以及后端Node项目
-
在本文档中,创建
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),连接线上数据库
感谢
-
B站教nodejs搭后台的的某UP
-
当前这家公司的运维大哥提供的运维支持
-
上家公司给我抽象数据表的大哥
-
感谢老婆对服务器购买的资金支持
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤