vue+.netCore+nginx部署到linux服務器上
1.linux 安裝nginx(我的版本nginx-1.14.2)
下載地址 https://nginx.org/download/
- 下載完成后, 把压缩包用xftp上传到你要安装的linux服务器位置里（我的上传到如下位置）。
- 到 linux 命令窗口 解压刚刚上传的压缩包执行以下命令(不要复制文字 只是注释一下。。。。)
#解压文件
tar -zxvf nginx-1.14.2.tar.gz
#进入解压后的 nginx 文件
cd nginx-1.14.2
#之后在当前文件目录下执行
./configure
- 之后在当前目录会出现 Makefile文件
- 有了这个文件 执行下面命令 编译安装
make
make install
- 等待编译完成后 到目录下的 sbin文件下 启动nginx
cd sbin
#执行 nginx
./nginx
- 在这就安装启动完成了,然后我们还需要 让防火墙开放 nginx 端口(nginx 默认是 80端口)
# 添加80端口
firewall-cmd --zone=public --add-port=80/tcp --permanent
命令含义： --zone #作用域 --add-port=80/tcp #添加端口，格式为：端口/通讯协议 --permanent #永久生效，没有此参数重启后失效
-然后我们重启防火墙
firewall-cmd --reload
- 重启完后我们 在查询下 刚刚添加的端口是否成功开发
firewall-cmd --query-port=3306/tcp
- 返回 yes 成功了。在这里 nginx 就安装完成了，之后我们开始 部署项目
2.以上安装了 nginx 我们开始部署
1 部署前端 我这里用xtfp工具 上传我要发布的前端项目打包文件。
- 打包上传完后我们开始配置 nginx
-cd 到我们刚刚安装 nginx 的文件下 conf 文件夹里
#执行
ls
# 能看到一个 nginx.conf的配置文件 执行下面命令打开文件
vi nginx.conf
- 找到server 配置如下
server {
listen 80;
server_name ; # 写你自己的公网ip
#charset koi8-r;
location / {
#跨域的 请求头配置
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 /root/WebVue/MaiDeng;
#这个跟这写就可以
index index.html index.htm;
# 开启后不会导致刷新白屏
try_files $uri $uri/ /index.html;
}
- 然后我们输入 http://公网ip 就可以访问到前端页面了
- 前端也就部署完成了。
2.部署 后端 (后端我用的.netCore 写的 这里的一些跨域什么的，我就不介绍了只介绍部署 )
- 把打包后的 项目文件 上传到 linux的文件夹
- 安装.net的sdk 我用的 .net5.0 所以在 liunx 需要安装 。执行下面命令安装
sudo yum install dotnet-sdk-5.0
- 安装完成后，保险起见我运行下项目，之后用postman请求测试下
# 到项目根目录 运行项目 项目名是你自己的启动项目名称
dotnet 项目名.dll
- 我设置了 项目启动默认 5000，5001 端口 (应该都知道，这块只提醒下。。)
- 启动后的界面,启动后 需要让防火墙 开放 5000 ,5001端口。
- 开发防火墙端口 命令
firewall-cmd --zone=public --add-port=5001/tcp --permanent
firewall-cmd --zone=public --add-port=5000/tcp --permanent
#重启防火墙
firewall-cmd --reload
#查询是否 开放 ，会返回yes / no
firewall-cmd --query-port=5001/tcp
firewall-cmd --query-port=5000/tcp
- 开放 后拿postman 测试下 请求成功没问题。 接下来开始在 nginx 配置部署
- 打开 nginx 的nginx.conf 文件 上面说到了怎么打开,我直接配置:
- 我们添加一个 location /api的
location /api {
#root html;
#index index.html index.htm;
# 移除前缀api 我的路径是有api的所以我不用去除
# rewrite ^/api/(.*)$ /$1 break;
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://ip:5000;
}
- 配置完之后 我们 到上级目录
cd ..
cd sbin
#重启下 nginx 服务
./nginx -s reload
到这部署就完成了，总结不易转发请标明来源。