当前位置:   article > 正文

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

docker部署vue3项目

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

  • 第一次接触docker的小伙伴,首先可以了解一下docker的基本原理,这个很快且很有必要,便于发现问题、分析问题、解决问题(我们就吃过这种亏)Docker菜鸟教程
一、Vue 项目Docker容器化打包部署
二、.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

    image-20231026110434839

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

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

1

  • 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仓库中。

    • 解决措施:建两个文件夹,前后端项目代码分别放一个文件夹。image-20231026111626863
  • 代码编译:我们生成一个docker镜像大致流程:拉取代码——》代码编译——》生成镜像。我们的上线平台进行代码编译时,总是不成功(我的猜测是:由于我们是前后端分离,合并到一个文件夹下导致文件路径有平台上有问题)

image-20231026113606751

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

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

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

      image-20231026113347620

  • 数据库连接时的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

下一次,世界精彩处见!

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/601555
推荐阅读
相关标签
  

闽ICP备14008679号