.net7.0与Vue3.0前后端分离项目linux云服务器部署全过程实践

1、前端部署

前端采用nginx静态代理服务器，重点记录一下nginx配置与前端打包环境配置、以及跨域问题上的前端相应解决方法。

1.1 前端开发环境配置

vite相关开发环境配置，这里主要针对开发环境调试代码时的环境配置，本地调试使用

        这里的主机ip地址为本地ip地址，前端端口号为5001，proxy下面为为后端开发环境接口地址，后端端口号为5003。

server: {
      port: 5001,
      host: '127.0.0.1',
      open: true,
      proxy: {
        '/api': {
          target: 'http://127.0.0.1:5003',
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/api/, '')
        }
      },
    },

      一般情况下，在vue框架的setting.js文件中会配置后端的url接口，开发环境设置为本地ip地址127.0.0.1即可，部署环境中需按照后端实际部署的服务器主机ip进行设置，如下图。

1.2 前端生产环境配置

       前端生产环境搭建，这里采用nginx Web服务器进行资源代理。部署过程中使用云服务器远程连接客户端为Xshell7，远程文件传输客户端为Xftp7。

       首先将前端vue框架的setting.js文件中后端的url接口修改为需要部署到的linux云服务器的主机ip地址和端口。（修改前述生产环境中的url接口配置）

      控制台输入命令 npm run build 打包前端生成dist文件，将dist文件远程传输至云服务器nginx的静态项目资源目录下（默认为nginx的安装路径），这里默认选择html作为前端项目路径，如下图。

        接下来配置nginx代理前端项目，使用xftp7远程记事本打开nginx的配置文件nginx.conf，配置如下，将ip地址与端口号修改为云服务器的相应环境，root路径为前端项目路径。

server {
         listen       5001;
        server_name  133.44.155.6;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
      location / {
        root /usr/local/nginx/html/dist;
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection keep-alive;
        proxy_set_header   Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
   }
location /prod-api/ {
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://133.44.155.6:5003/;
		}
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

配置完成后，保存，在xshell7远程客户端中输入如下命令刷新配置，重启nginx服务。

 systemctl daemon-reload
 systemctl restart nginx

       若linux环境中systemctl失效，但是已经安装了systemd服务，则需要检查linux中环境变量，具体操作如下，https://cn.linux-console.net/?p=13854，本人采用将export  PATH=$PATH:/usr/bin/systemctl 环境变量手动添加至linux服务器/etc目录下的profile配置文件。其他命令失效情况也可以采用此方法配置环境变量。

此时，在浏览器中输入前端地址，应该已经可以访问前端资源。

2、后端部署

2.1 webapi后端配置与发布

     后端在配置上主要是注意url接口地址，以及可能会出现跨域问题，最后会单独一章节统一记录跨域问题解决。

url接口地址默认为本机ip加端口号即可，本项目配置信息均在appsettings.json中。

发布选项详情

2.2 linux后端环境配置

2.2.1dotnet安装

1，执行命令 dnf info dotnet,查看软件包里.NET 的版本，若无相应版本则需手动下载安装

2，手动去找.NET 8 运行时安装包地址。打开https://dotnet.microsoft.com/download/dotnet/7.0，找到.NET 7.0 SDK (v7.0.410)下，Linux 下，Binaries 下的 X64，直接会新窗口下载，不让他下载，直接获取下载地址，我获取到的是： https://download.visualstudio.microsoft.com/download/pr/86497c4f-3dc8-4ee7-9f6a-9e0464059427/293d074c28bbfd9410f4db8e021fa290/dotnet-sdk-7.0.410-linux-x64.tar.gz

3，运行命令 curl -Lo dotnet.tar.gz https://download.visualstudio.microsoft.com/download/pr/86497c4f-3dc8-4ee7-9f6a-9e0464059427/293d074c28bbfd9410f4db8e021fa290/dotnet-sdk-7.0.410-linux-x64.tar.gz

4，运行命令 mkdir dotnet

5，运行命令 tar -C dotnet -xf dotnet.tar.gz

6，运行命令 export DOTNET_ROOT=~/dotnet #您安装 dotnet 的路径

7，运行命令 export PATH=\$PATH:~/dotnet #您安装 dotnet 的路径

8，运行命令 dotnet --info，看看是不是成功安装了 7.0.410,如下图

2.2.2 webapi接口部署

       将发布完成的webapi后端文件传输至dotnet文件目录下，使用linux系统的systemd服务进行后端服务配置。进入system路径新建dotnet后端服务，本机system路径为/etc/systemd/system,进入后新建service文件，可用 vim /etc/systemd/system/dotnettest.service 命令在控制台创建，也可直接使用xftp7创建，详细配置如下图。

[Unit]
Description=dotnettest    #服务描述


[Service]
WorkingDirectory=/root/dotnet/dotnettest     #后端程序所在路径
ExecStart=/root/dotnet/dotnet dotnettest.dll --urls=http://*:5003  
#空格前为.netcore运行时路径，空格后为后端程序，*表示程序监听的url，服务器任意接口都可访问
User=root  #用户名
Group=root #用户组
Environment=ASPNETCORE_ENVIRONMENT=Production  #dotnet环境变量
Restart=always    #程序崩溃或异常时自动重启

[Install]
WantedBy=multi-user.target  

#指定服务在 multi-user.target目标下启动，表示多用户、非图形界面的系统

       后端service服务文件创建完成后，输入以下命令开启服务，其中systemctl status dotnettest.service命令检查服务运行状态，若运行失败需从中查看报错原因，运行成功后设置开机自启动。打开浏览器访问后端地址，访问成功即后端部署完成。

 systemctl daemon-reload              #重载systemd服务配置文件
 systemctl start dotnettest.service   #开启dotnettest.service服务
 systemctl status dotnettest.service  #查看dotnettest.service服务状态
 systemctl enable dotnettest.service  #设置dotnettest.service服务开机自启动

 3、跨域问题解决

        当后端在跨域配置上已经设置了允许任意ip，允许任意请求方法，还会出现跨域报错时，大概率是前后端请求头不一致引起，需要检查前后端的请求头拦截相关配置。

3.1 前后端跨域请求配置

        后端在跨域配置上需要针对浏览器提示的跨域报错进行修改，比如假设我的前端get方法不设置任何请求头方法，前端只对复杂的post请求设置请求头为下图Content-Type。

        此时浏览器对于post请求会默认通过options请求预检，预检通过后才会进行post请求，于是我们需要在后端加上对options的判断，当浏览器通过前端发送options请求到后端时，后端返回的请求头需与前端定义的post请求头一致，后端具体配置如下。

public async Task Invoke(HttpContext httpContext)
        {
            if(!httpContext.Response.Headers.ContainsKey("Access-Control-Allow-Origin") )
            {
                httpContext.Response.Headers.Add("Access-Control-Allow-Origin", "*");
                
               
            }
            if (httpContext.Request.Method == "OPTIONS")
            {
                httpContext.Response.Headers.Add("Access-Control-Allow-Headers", "Content-Type");
                httpContext.Response.ContentType = "application/json;charset=UTF-8";
                return;
            }

            await _next(httpContext);
        }

 3.2 post方法访问异常

       在部署过程中，可能会遇到post方法访问异常的情况，3.1章节已经针对post方法定义了前后端的访问规约，若此时浏览器访问get方法正常，但是访问post方法还是提示content-type的报错，这时需要检查前端向后端发送post方法的参数时，是否进行了json序列化，否则后端不能正确按照约定的请求头的json格式进行正确响应，于是需要对post方法的请求参数做出统一json序列化处理，详细如下图。

 config.headers['Content-Type'] = 'application/json;charset=UTF-8'
 config.data = JSON.stringify(config.data);

至此接口访问应该能够正常，系统能够正常运行。