asp.netcore8 + vue3 + mysql 自用记账项目（四）项目部署

一、生成后台api服务

 1、在系统生成的Dockerfile基础上，添加时区标识

FROM mcr.microsoft.com/dotnet/aspnet:8.0 AS base
ENV TZ Asia/Shanghai
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
WORKDIR /app
EXPOSE 80
EXPOSE 443

FROM mcr.microsoft.com/dotnet/sdk:8.0 AS build
WORKDIR /src
COPY ["Bookkeeping_API.csproj", "."]
RUN dotnet restore "./Bookkeeping_API.csproj"
COPY . .
WORKDIR "/src/."
RUN dotnet build "Bookkeeping_API.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "Bookkeeping_API.csproj" -c Release -o /app/publish /p:UseAppHost=false

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "Bookkeeping_API.dll"]

2、docker-compose文件

services:
  bookkeeping_api:
    image: ${REGISTRY:-test}/bookkeeping_api:${PLATFORM:-linux}-${TAG:-v20240910-01}
    container_name: bookkeeping_api
    restart: always
    environment:
      - ASPNETCORE_ENVIRONMENT=Production
      - ASPNETCORE_URLS=https://+:443;http://+:80
      - ClientCredentialsUserOptions__Authority=http://IP:8001
      - SeqServerUrl=http://seq
      - ConnectionString=server=mysql8;port=3306;database=Bookkeeping;uid=root;pwd=密码;charset=utf8;
      - HttpsCert__PemPath=/app/Certs/IP+1.pem
      - HttpsCert__PrivateKeyPath=/app/Certs/IP+1-key.pem
    ports:
      - "8001:80"
    volumes:
      - /root/ssl/IP+1.pem:/app/Certs/IP+1.pem
      - /root/ssl/IP+1-key.pem:/app/Certs/IP+1-key.pem
    networks:  
      - data_net
 
networks:  
  data_net:  
    external: true

3、生成发布镜像

  由于服务器太小，不适合安装k8s等工具，故使用原始方法。

  1）本地生成镜像

进入目录：cd "D:\VS2019\Git\我的项目\Bookkeeping_API"
构建镜像：docker-compose build
镜像打包成压缩文件：docker save -o D:/系统发布/bookkeeping_api.tar test/bookkeeping_api:linux-v20240910-01
将压缩文件传入服务器：scp D:/系统发布/bookkeeping_api.tar root@IP:/root/bookkeeping_api.tar 

  2）服务器发布

解压镜像：docker load -i bookkeeping_api.tar
修改文件：vim docker-compose.bookkeeping_api.yml
验证文件是否正确修改：cat docker-compose.bookkeeping_api.yml
停用旧容器：docker-compose -f docker-compose.bookkeeping_api.yml down
启动新服务：docker-compose -f docker-compose.bookkeeping_api.yml up -d
查看容器是否正常运行：docker ps -a

二、基于nginx生成vue镜像

1、打包前，保证打包系统内有nginx镜像，然后build当前vue项目

npm run build

2、构建文件Dockerfile

FROM nginx

# 将本地的 dist 文件夹复制到 nginx 默认的静态文件目录
COPY ./dist /usr/share/nginx/html
# COPY ./index.html /usr/share/nginx/html/index.html

# 暴露 Nginx 默认端囗
EXPOSE 80

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

3、基于nginx镜像，所以有其功能，配置文件my-vue-app.conf

user  nginx;
worker_processes  auto;
error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;
events {
    worker_connections  1024;
}
http {
    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"';

    access_log  /var/log/nginx/access.log  main;

    server {
        listen       8002;
        server_name  IP; # 修改为docker服务宿主机的ip
    
        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }

        location /api{
            proxy_pass http://IP:8001;
            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;
		}
    }
    sendfile        on;
    #tcp_nopush     on;
    keepalive_timeout  65;
    #gzip  on;
    include /etc/nginx/conf.d/*.conf;
}

4、服务启动文件docker-compose.vue.yml

services:
  # Vue演示服务
  my_vue_app:
    image: my_vue_app:20240724
    container_name: my_vue_app
    restart: unless-stopped
    ports:
      - "8002:80"  # 将主机端口 8080 映射到容器端口 80
    volumes: 
      - /root/my-vue-app.conf:/etc/nginx/nginx.conf

 5、后续操作同后台api发布，最终效果如下图