.NETCore和VUE部署在Linux-Nginx

一、Linux-Nginx

官网 在 CentOS 上安装 .NET - .NET | Microsoft Docs

每台计算机只需要执行一次此操作：

 sudo rpm -Uvh https://packages.microsoft.com/config/centos/7/packages-microsoft-prod.rpm

安装sdk3.1版本的:

sudo yum install dotnet-sdk-3.1

查看版本：

dotnet --list-sdks

可以测试了 dotnet

安装Node和npm/cnpm 在/home文件夹下:

 wget https://nodejs.org/dist/v12.16.3/node-v12.16.3-linux-x64.tar.xz

解压：

tar -xf node-v12.16.3-linux-x64.tar.xz

设置全局变量，意思是在所有文件夹下都可以操作npm：

vim /etc/profile 添加这句话 先在最后的位置输入i 再粘贴：PATH=$PATH:/root/node-v12.16.3-linux-x64/bin/ 按下Esc 输入: 在输入wq!可以了

刷新配置文件：

source /etc/profile

测试结果：

npm -v

node -v

想要更快，可以使用淘宝的国内镜像cnmp:

 npm install -g cnpm --registry=https://registry.npm.taobao.org

查看cnpm的版本：

cnpm -v

安装PM2进行守护：

cnpm install -g pm2

对进程进行守护：

pm2 list

进入打包的项目文件夹下，对该项目进行守护：

pm2 start "dotnet Blog.Core.dll" --name apk.dll

查看id=0的日志：

pm2 logs 0

# 重启所有应用

pm2 restart all

可以访问api的数据了：

 curl http://localhost:5000/WeatherForecast

安装代理服务器nginx：

sudo yum install nginx

启动nginx:

sudo systemctl enable nginx

sudo systemctl start nginx

修改文件权限：

sudo chmod 777 /etc/squid

在nginx添加配置文件以代理api：

###### apk begin ####### ​  

server {  

 listen 90;  

 server_name localhost;      

location / {

 root html;  

proxy_pass http://localhost:8081;

 proxy_http_version 1.1;

 proxy_set_header Upgrade $http_upgrade;  

proxy_set_header Connection keep-alive;  

proxy_set_header Host $host;

 proxy_set_header X-Real-IP $remote_addr;

 proxy_cache_bypass $http_upgrade;  

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; ​  

index index.html index.htm;

}

} ​

###### apk end #######

检查语法是否正确：

nginx -t

重启nginx：

nginx -s reload

开启腾讯端口8081

开启服务器端口 8081

1、开放端口

firewall-cmd --zone=public --add-port=8081/tcp --permanent   # 开放5672端口

​ firewall-cmd --zone=public --remove-port=8081/tcp --permanent #关闭5672端口 ​

firewall-cmd --reload   # 配置立即生效 ​

firewall-cmd --zone=public --list-ports #查看防火墙所有开放的端口

netstat -lnpt #查看监听的端口

图片nginx的配置

 server {
        listen       90; #端口号
        server_name  localhost;

        #charset utf-8;

        #access_log  logs/host.access.log  main;
        
      location ~ .*\.(gif|jpg|jpeg|png)$ {
      expires 24h;  
      root D:/.NetCore/images/Uploads;#指定图片存放路径  
      access_log D:/.NetCore/images/Uploads;#图片路径  
      proxy_store on;  
      proxy_store_access user:rw group:rw all:rw;  
      proxy_temp_path        D:/.NetCore/images/Uploads;#图片路径  
      proxy_redirect          off;  
      
      proxy_set_header        Host 127.0.0.1;  
      proxy_set_header        X-Real-IP $remote_addr;  
      proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;  
      client_max_body_size    10m;  
      client_body_buffer_size 1280k;  
      proxy_connect_timeout   900;  
      proxy_send_timeout      900;  
      proxy_read_timeout      900;  
      proxy_buffer_size       40k;  
      proxy_buffers           40 320k;  
      proxy_busy_buffers_size 640k;  
      proxy_temp_file_write_size 640k;  
      if ( !-e $request_filename)  
      {  
      proxy_pass  http://192.168.3.141:16666;  #代理访问地址
        }
      }
    }

二、Docker篇

1、安装sdk-跟上面的步骤一样

2、安装nginx-跟上面的步骤一样

3、安装docker

step1:安装必要的一些系统工具

sudo yum install -y yum-utils device-mapper-persistent-data lvm2

step2：添加软件源信息

 sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

Step3：更新并安装Docker-CE

sudo yum makecache fast (可选)

sudo yum -y install docker-ce

Step4：开启Docker服务

sudo service docker start

4、查看docker的版本

docker --version

5、如果安装不成功，新买的系统，我们可以更新一下，毕竟有些包或者依赖最新的还是更好的，不过也不是必须的：

sudo yum update

vue-elment-admin 部署

1、安装npm

2、打包 npm run build:prod --report

3、安装nginx

4、配置nginx.config​ ​

###### vueadmin begin #######

  server {
    listen 60;
    server_name localhost;

    location / {
      try_files $uri $uri/ /index.html;
      root /root/vue-admin-template-master/dist;
      index index.html index.htm;
    }

    location /api/ {
      rewrite ^.+apb/?(.*)$ /$1 break;
      include uwsgi_params;
      proxy_pass http://localhost:6919;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

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

###### vueadmin end #######

5、配置vue的 vue-config-js，在devServer里加上进行访问后端API的：

  proxy: {
      // 配置多个代理
      "/api": {
        target: "http://localhost:8081",//这里改成你自己的后端api端口地址，记得每次修改，都需要重新build
        ws: true,
      }
    },

6、用nginx代理需要在vue的.env.development文件中的设置成

VUE_APP_BASE_API = ''