.net6+Vue3前后端分离 项目Docke容器化打包部署_docker部署vue3项目

.net6+Vue3前后端分离 项目Docker容器化打包部署

• 第一次接触docker的小伙伴，首先可以了解一下docker的基本原理，这个很快且很有必要，便于发现问题、分析问题、解决问题（我们就吃过这种亏）Docker菜鸟教程。

一、Vue 项目Docker容器化打包部署

• 本人实测这个教程可以成功windows开发环境下docker部署vue项目

二、.net6项目Docker容器化打包部署

• 本人实测这个教程可以成功：.net6 项目Docke容器化打包部署，在本地数据库不需要按照教程中的数据库配置，可以直接访问。

• 数据库的连接可能存在SSL连接协议的问题，可以在dockfile中加入

  RUN sed -i 's/MinProtocol = TLSv1.2/MinProtocol = TLSv1/' /etc/ssl/openssl.cnf \
  && sed -i 's/CipherString = DEFAULT@SECLEVEL=2/CipherString = DEFAULT@SECLEVEL=1/' /etc/ssl/openssl.cnf
  1
  2

  

• 本人是按照‘使用 docker-mcr’或 ‘拉取国内服务器上的镜像’，具体哪种方法忘记了，但前者概率更大解决 Docker 下载 mcr.microsoft.com 镜像慢的办法

三、Nginx的网络配置

• Nginx详解
• 甲方信息中心说具体网络结构，可以学习 Kubernetes （k8s）进行理解。
• 了解Nginx的网络代理就可以进行网络配置
• 前后端的通信相当于 前后端生成的docker镜像之间通信

• Nginx.conf

server {
    listen       80;
    server_name  localhost;

    client_header_buffer_size 32k;
    large_client_header_buffers 4 32k;
    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;
  
   
 # 跨域：当请求的网址中含有 ‘/api/’时，将请求转发到 后端doker镜像。你可以理解为Nginx代理服务存在于前端docker镜像中（本人的理解，也不知对不对）
    location /api/{
        
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        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';
        proxy_pass http://10.12.34.56:8080; # 后端docker镜像的ip地址和端口，如果是本机。                                                           #http://localhost:后端端口;
    }

    location / {
        proxy_redirect off;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        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';
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    # error_page  404              /;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

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
35
36
37
38
39
40
41
42
43
44
45
46
47

• 配置前端请求的基础地址，在main.ts中配置

  axios.defaults.baseURL = 'http://testbackend.scp.dgyt.petrochina'   # 如果是本机，                                                                      http://localhost:端口
  1

四、遇到的问题

• 我们在开发时，前后端分离，前后端项目分别存储在两个不同的git仓库中，后来在实际上云过程中，要求存储在一个git仓库中。

  • 解决措施：建两个文件夹，前后端项目代码分别放一个文件夹。

• 代码编译：我们生成一个docker镜像大致流程：拉取代码——》代码编译——》生成镜像。我们的上线平台进行代码编译时，总是不成功（我的猜测是：由于我们是前后端分离，合并到一个文件夹下导致文件路径有平台上有问题）

• 解决措施：前后端代码自己在本地就进行编译，将编译好的代码再上传到git仓库中。在上线平台上就不编译了!

  • 前端代码编译：npm run build-only , 生成一个dist文件夹，我们就是根据dist中的文件生成镜像

  • 后端代码编译：VS中进行发布，会生成一个publish文件夹，我们就是根据publish中的文件生成镜像。

    

• 数据库连接时的ssL协议问题

  • 解决措施：dockfile中加入

    RUN sed -i 's/MinProtocol = TLSv1.2/MinProtocol = TLSv1/' /etc/ssl/openssl.cnf \
    && sed -i 's/CipherString = DEFAULT@SECLEVEL=2/CipherString = DEFAULT@SECLEVEL=1/' /etc/ssl/openssl.cnf
    1
    2

• 图片问题：C#中的using System.Drawing; using System.Drawing.Imaging;等图片转换方法 在Linux平台不适用

  • 解决措施：图片处理方法改为SixLabors

    using SixLabors.ImageSharp;
    using SixLabors.ImageSharp.Formats.Jpeg;
    using SixLabors.ImageSharp.PixelFormats;
    1
    2
    3

下一次，世界精彩处见！