Vue+asp.net core 項目部署到linux服務器

前后端分離 vue + asp.net core WebApi  項目部署到linux Nginx服務器的發布配置過程，asp.net core 項目只介紹跨域配置部分，asp.net core 環境搭建以及項目發布請參閱其他博文。

首先是vue反向代理配置這個在開發過程中應該已經配置完成，發布服務器時需要更改為服務器地址，博主參閱其他博文中提到該配置只在開發環境中有效，因博主前端項目經驗較少沒有進行測試，有閱讀到該貼的朋友給與回復確認謝謝！

1.開發中反向代理配置（vue.config.js）

 

 

 2.打包發布vue項目將最終生成的dist文件夾上傳到linux服務器，如下路徑 /usr/local/web/dist 在nginx項目配置文件中配置該路徑

 

 

 3.nginx配置，Nginx安裝請參閱其他博文，此處將vue項目配置文件獨立配置使用，首先找到nginx.conf 文件夾conf目錄，在同級目錄下新建vhost目錄創建配置文件 ap.conf文件名不限制，自己能知道是哪一個程序的配置就行，直接配置在nginx主配置文件中也可以，這里只是為了獨立區分，配置不凌亂修改配置方便

 

 

 

server {
listen 8088;
#autoindex on;
server_name 101.201.149.182;
client_max_body_size 50M;
#access_log /usr/local/nginx/logs/access.log combined;
#index index.html index.htm index.jsp index.php;
#error_page 404 /404.html;
if ( $query_string ~* ".*[\;'\<\>].*" ){
return 404;
}
root /usr/local/web/dist;#項目上傳到linux的路徑
location / {
#root /usr/local/web/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html; #Vue路由history模式添加該行, 若不是則移除該行
}
#以下配置是請求代理跨域 http://xxx.top/prod-api/XXX 反向代理請求http://127.0.0.1:8080/XXX
location /api { #與vue項目中的路由配置一致
#rewrite ^.+ap/?(.*)$ /$1 break;
#include uwsgi_params;
proxy_pass http://101.201.149.182:5001;*后端接口代理配置
}

#靜態資源
location ~ .*\.(js|css|jpg|png|gif)$ {
expires 2d;
}
#add_header Access-Control-Allow-Origin *;
default_type 'text/html';
charset utf-8;
}

nginx配置有一些改動

 

 

4.修改nginx主配置文件在http{}節點中最后添加include /usr/local/nginx/vhost/*.conf;

#user nobody;
worker_processes 1;

#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;

#pid logs/nginx.pid;

events {
worker_connections 1024;
}

http {
include 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 logs/access.log main;

sendfile on;
#tcp_nopush on;

#keepalive_timeout 0;
keepalive_timeout 65;

#gzip on;

server {
listen 80;
server_name localhost;

#charset koi8-r;

#access_log logs/host.access.log main;

location / {
root html;
index index.html index.htm;
}

#error_page 404 /404.html;

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

# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}

# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}

# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}

# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}

# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;

# location / {
# root html;
# index index.html index.htm;
# }
#}

# HTTPS server
#
#server {
# listen 443 ssl;
# server_name localhost;

# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;

# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;

# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;

# location / {
# root html;
# index index.html index.htm;
# }
#}
include /usr/local/nginx/vhost/*.conf;#導入vhost目錄下所有.conf結尾的配置

}

5.重啟加載配置文件 /usr/local/nginx/sbin/nginx -s reload

6.netstat -tnlp |grep :8088 查看是否監聽配置的端口

7.asp.net core 啟用跨域配置

public void ConfigureServices(IServiceCollection services)
{
    var cross = Configuration.GetValue<string>("Cross");//配置文件中讀取允許跨域的域名或者http://ip：port
            services.AddCors(options =>{
                var crosses=  cross.Split(",",StringSplitOptions.RemoveEmptyEntries);
                options.AddDefaultPolicy(builder => {
                    builder.WithOrigins(crosses).AllowAnyHeader().AllowCredentials().AllowAnyMethod();
                });
            });
}

 app.UseRouting();
            //UseRouting之后 UseEndPoint之前
            app.UseCors();//啟用跨域
            app.UseAuthentication();
            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
                //endpoints.MapGet("/deliveryNotification/{chatbotId}/status",DeliveryNotification);
            });

8.本項目配置為全部啟用options.AddDefaultPolicy，如果想配置單個接口或者是多個域不共用接口時使用options.AddPolicy，app.UseCors()配置同上

services.AddCors(options =>
{
    options.AddPolicy(AllowSpecificOrigin,//AllowSpecificOrigin 字符串常量 定義在startup 中

builder => { builder.AllowAnyMethod() .AllowAnyOrigin() .AllowAnyHeader(); }); });

9.接口標注，其中‘api’同AllowSpecificOrigin常量值

 

 有不足支持歡迎反饋，謝謝