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

.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
    

    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;
    }
}

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

    axios.defaults.baseURL = 'http://testbackend.scp.dgyt.petrochina'   # 如果是本机,                                                                      http://localhost:端口
    
四、遇到的问题
  • 我们在开发时,前后端分离,前后端项目分别存储在两个不同的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
      
  • 图片问题:C#中的using System.Drawing; using System.Drawing.Imaging;等图片转换方法 在Linux平台不适用

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

      using SixLabors.ImageSharp;
      using SixLabors.ImageSharp.Formats.Jpeg;
      using SixLabors.ImageSharp.PixelFormats;
      

下一次,世界精彩处见!

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值