随笔 - 4  文章 - 0  评论 - 5  阅读 - 1426

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

简言

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

准备工作

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

服务器准备

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

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

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

  1. 此时本地主机中 在.ssh目录下执行ssh-keygen -R 服务器IP,生成ssh秘钥,这一步是为了后续禁用密码登录,使用本机ssh登录更安全,成功后目录下会出现known_hosts.old
    image.png

  2. 执行ssh-copy-id root@服务器IP,将本地公钥复制到服务器的ssh权限目录下

image.png

  1. 禁用密码登录,在远程服务器上执行vim /etc/ssh/sshd_config,设置
    image.png
    然后保存

  2. 执行service sshd restart重启配置

  3. 然后关闭远程面板或者命令行工具,重新打开命令行工具,执行ssh root@服务器IP,此时可以发现不用输入密码便可以登录服务器

  4. 执行apt update,更新包索引的命令。它的作用是从配置的包仓库中获取最新的软件包信息,以便后续安装、升级和删除操作。

  5. 执行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,然后把查看到的公钥串

image.png

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

  1. 我这里在/opt目录下新建project目录,mkdir project

image.png

  1. 然后在project目录下(git clone)拉取我的前端React项目以及后端Node项目
    image.png

  2. 在本文档中,创建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中前端的打包构建或后端服务启动的命令
image.png

image.png

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

结果

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

注意

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

感谢

  1. B站教nodejs搭后台的的某UP

  2. 当前这家公司的运维大哥提供的运维支持

  3. 上家公司给我抽象数据表的大哥

  4. 感谢老婆对服务器购买的资金支持

posted on   coding-老王  阅读(15)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示