跳到主要内容

构建前后端分离项目

准备工作​

创建 backend 与 frontend 目录，成功后创建 backend 与 frontend 的子目录及文件

> mkdir backend frontend db
> mkdir backend/publish frontend/dist -p
> touch db/my.cnf db/init.sql db/Dockerfile backend/Dockerfile frontend/Dockerfile frontend/app.conf

创建完成后的完整目录如下：

.
├── backend
│   ├── Dockerfile
│   └── publish
├── db
│   ├── Dockerfile
│   ├── init.sql
│   └── my.cnf
├── docker-compose.yml
└── frontend
    ├── default.conf
    ├── dist
    └── Dockerfile

创建专用网络​

创建一个专用网络，名字为 appnet

> docker network create appnet

数据库部署​

编辑 my.cnf，设置字符集为 utf8mb4，并设置默认时区为 +08:00，并设置表名大小写敏感

[mysql]
default-character-set=utf8mb4

[mysqld]
lower-case-table-names=1
character-set-server=utf8mb4
default-time-zone='+08:00'

同时准备数据库初始化脚本 init.sql

CREATE DATABASE IF NOT EXISTS `appdb` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
...

编写 Dockerfile 文件​

在 Dockerfile 中设置默认访问端口为 3306，并开放端口，允许修改端口

Dockerfile
FROM mysql:5.7

COPY ./my.cnf /etc/mysql/my.cnf
COPY ./init.sql /docker-entrypoint-initdb.d/

EXPOSE 3306

构建镜像​

> docker build -t db .

完成构建后可以通过 docker images 查看新镜像

> docker images
REPOSITORY    TAG       IMAGE ID       CREATED          SIZE
db            latest    96159225485d   10 minutes ago   441MB

运行​

设置自动启动，开放端口 3306，并设置网络为 appnet

docker run --name appdb -itd -p 3306:3306 \
-v ./conf.d:/etc/mysql/conf.d -v ./data:/var/lib/mysql \
-e MYSQL_ROOT_PASSWORD=123456 --restart=always --network appnet appdb

接口部署​

将接口项目发布后的文件上传至 publish 目录下

编写 Dockerfile 文件​

在 Dockerfile 中设置默认访问端口为 5000，并开放端口，允许修改端口

Dockerfile
FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build-env
WORKDIR /app

COPY ./publish .
EXPOSE 5000

ENTRYPOINT ["dotnet", "app.dll"]
CMD ["--urls","http://*:5000"]

构建镜像​

> docker build -t appapi .

完成构建后可以通过 docker images 查看新镜像

> docker images
REPOSITORY    TAG       IMAGE ID       CREATED          SIZE
appapi        latest    49c6deeec83d   38 minutes ago   933MB

运行​

设置自动启动，开放端口 5000，并设置网络为 appnet

> docker run --name appapi1 -itd -p 5000:5000 --restart=always --network appnet appapi

前端部署​

将打包好的文件放在 frontend/dist 目录下

创建 default.conf 文件，并设置如下内容

default.conf
upstream ms_backend {
  server appapi1:5000;
}

server {
  listen 80;
  server_name  localhost;
  root  /app;
  location / {
    try_files $uri $uri/ @router;
    index  index.html index.htm;
  }
  location @router {
    rewrite ^.*$ /index.html last;
  }
  location ^~ /api/ {
    proxy_pass http://ms_backend;
    add_header Access-Control-Allow-Credentials true;
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET,POST,OPTIONS,PUT,DELETE' always;
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
  }
  location ^~ /_fs_/ {
    proxy_pass http://ms_backend;
    rewrite ^/_fs_/(.*)$ /$1 break;
  }
}

编辑 Dockerfile 文件​

添加内容与配置文件

Dockerfile
FROM nginx:1.21
WORKDIR /app
COPY ./dist .
COPY ./default.conf /etc/nginx/conf.d/

构建镜像​

> docker build -t appweb .

构建完成后可以通过 docker images 查看镜像

> docker images
REPOSITORY    TAG       IMAGE ID       CREATED          SIZE
appweb        latest    794890778976   38 minutes ago   133MB

运行​

设置自动启动，开放端口 80，并设置网络为 appnet

> docker run --name appweb1 -itd -p 80:80 --restart=always --network appnet appweb

当项目运行出现问题可以通过 docker logs appweb1 查看日志

# 查看容器内部细节
> docker inspect appweb1
# 查看容器内运行的进程
> docker top appweb1