docker nginx 部署 node 和前端应用

本文是完全面向新手的，除了包括详细的部署过程外，还包括作为一个前端开发者对于初级 linux 的学习路线和资源推荐

前期准备

  1. unix 常见操作指令，两小时左右就可以看完，练习时可以使用 git bash

  2. docker 容器技术，理解 docker 目录挂载，docker 镜像制作，docker-compose,推荐 b 站教学视频Docker 1 小时快速上手教程，无废话纯干货以及其文档.

  3. nginx 反向代理,这里主要用于对前端静态资源应用的部署，所以要求不高，只需要看懂基本的服务配置即可，推荐nginx 一小时入门精讲课程(干货纯享版),只需看前 4p 即可。

  4. 一个连接服务器的终端，这里推荐 vscode 的 remote SSH。

  5. 一个 node 的后端应用

  6. 一个 react 的前端应用

部署

部署完整的过程主要分为两步，部署前端应用和部署后端应用。

  1. 使用 ssh 连接服务器，进入 root 目录,创建 admin 文件夹（后端应用上传）,创建 ngnix 文件夹，通过后续 docker-compose.yml 指定容器内的前端资源和 nginx 的配置
1
2
3
4
5
6
7
mkdir admin
mkdir nginx
cd nginx
# 前端资源文件
mkdir html
# nginx配置
touch nginx.conf
  1. 前端应用打包,将打包的代码上传到服务器的/root/nginx/html 文件夹下
1
npm run build
  1. 将下列内容放于/root/nginx/nginx.conf 下的 nginx 配置
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
29
30
31
# nginx.conf
# 开启文件权限为root
user  root;
worker_processes  1;
events {
  worker_connections  1024;
}
http {
  include       mime.types;
  default_type  application/octet-stream;
  sendfile        on;
  keepalive_timeout  65;
  server {
      listen       3000;
      # 一般配置域名
      server_name  admin;
      location / {
          # 访问3000 映射的文件路径 这里是docker内nginx的路径 前面使用docker volumn挂载过（真实代理的文件位置）
          root   /usr/share/nginx/html;
          # 防止刷新页面404
          try_files $uri $uri/ /index.html;
          # 确定首页
          index  index.html;
      }
      error_page   500 502 503 504  /50x.html;
      location = /50x.html {
          root   html;
      }
  }
}

  1. 进入 admin，使用 git 下载 node 后端源码/或者直接上传源代码到 admin 下,注意.env 和 keys 文件夹需要手动上传
1
2
cd admin
git clone https://github.com/sunburst89757/react-admin-backend
  1. 修改.env 中 host port 和 连接的数据库名称和密码
1
2
3
4
5
APP_HOST=yourip
APP_PORT=yourport
# DATABASE_URL= "mysql://root:qweasdzxc123@localhost:3306/react_admin"
DATABASE_URL="mysql://root:yourpassword@yourip:yourport/react_admin"

  1. docker 部署镜像 一定要修改下面数据库的密码为你自己设置的密码
1
2
cd react-admin-backend
docker-compose up -d

这里解释一下 docker 的配置

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
29
30
31
32
33
34
# docker-compose.yml
version: "3"
services:
  nginx: # 服务名称，用户自定义
    image: nginx:latest # 镜像版本
    ports:
      - 3000:3000 # 暴露端口 容器端口暴露给宿主机端口
    volumes: # 挂载 目录挂载
      - /root/nginx/html:/usr/share/nginx/html
      - /root/nginx/nginx.conf:/etc/nginx/nginx.conf
    privileged: true # 这个必须要，解决nginx的文件调用的权限问题
  mysql:
    image: mysql:5.7.27
    ports:
      - 3306:3306
    environment: # 指定用户root的密码
      - MYSQL_ROOT_PASSWORD=yourpassword
   redis:
    image: redis:6.2.6
    container_name: my-redis
    restart: always
    ports:
      - 6379:6379
    command: redis-server --save 20 1 --loglevel warning --requirepass yourpassword
    volumes:
      - /root/redis/cache:/data
  #react_admin是后端服务的名称 根据当前目录下的Dockerfile生成镜像
  react_admin:
    image: admin:latest
    build: . # 表示以当前目录下的Dockerfile开始构建镜像
    ports:
      - 8080:8080
    depends_on: # 依赖与mysql、redis，其实可以不填，默认已经表示可以
      - mysql
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
# Dockerfile
# 拉取node的最新镜像
FROM node:latest
# 设置镜像的工作目录 /app
WORKDIR /app

COPY package*.json ./


COPY prisma ./prisma/

# COPY ENV variable
COPY .env ./

# COPY tsconfig.json file
COPY tsconfig.json ./

RUN npm install

COPY . .

# 根据prisma.schema 生成新的prisma client api(ts支持)
RUN npx prisma generate

EXPOSE 8080
#  以不进行类型检查的方式启动服务
CMD npx ts-node-transpile-only ./src/index.ts

注意若 docker 容器构建失败，修改 Dockerfile 或者 docker-compose.yml 解决后，使用 docker-compose build 重新构建容器，之后再使用 docker-compose up -d 启动容器

  1. 数据库迁移
  • navicat 连接服务器上的 mysql yourip:3306
  • 本地数据库通过 navicat 的转储数据库文件生成 sql 文件，服务器上的 navicat 运行生成的 sql 文件即可完成数据库数据迁移 注意：转存文件时不要转存_prisma_migration 这张表
  1. 至此前后端应用均已部署完成，后端应用部署到了 yourip:8080 端口，前端应用部署到 yourip:3000 端口 接着可以使用下面指令进行容器日志的查询
1
docker logs containerId
  1. 其他可能需要的指令
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 运行中的容器
docker container ls
docker ps
# 所有的容器
docker ps -a
# 所有镜像
docker images
# 删除镜像
docker rmi id/name
# 删除容器
docker rm id
# 重启容器 一般修改了容器的配置文件 比如说nginx的配置
docker restart id
# 查看某个容器的日志
docker logs id
# 查看系统进程
systemctl status docker
后端
#部署
docker nginx 部署 node 和前端应用
https://sunburst89757.github.io/2022/12/20/deploy/
作者
Sunburst89757
发布于
2022年12月20日
许可协议