关于服务器配置:从零开始用nginx云服务器部署前端项目

打包前端我的项目

以我本人的我的项目为例子

在我的项目根门路下的vue.config.js外面配置部署利用包时的根本 URL publicPath，不配置的话默认是 publickPath:"/"；
```
module.exports = {  publicPath: "/",};
```
为了对立vue-router路由的base和publickPath，能够这样写：
```
const router = new VueRouter({  mode: 'history',  base: process.env.BASE_URL,  routes})
```
打包完前端我的项目后须要将要打包好的dist外面的文件放到服务器上，而后再配置nginx
在服务器上（linux零碎）配置nginx
因为我的我的项目用的是腾讯云服务器(centos6.5)，所以我就以这个举例子了

下载安装nginx

参考：https://www.runoob.com/linux/...

装置编译工具及文库

yum -y install make zlib zlib-devel gcc-c++ libtool  openssl openssl-devel

先要装置 PCRE
PCRE 作用是让 Nginx 反对 Rewrite 性能。

[root@bogon src]# cd /usr/local/src/[root@bogon src]# wget http://downloads.sourceforge.net/project/pcre/pcre/8.35/pcre-8.35.tar.gz

解压安装包

[root@bogon src]# tar zxvf pcre-8.35.tar.gz

进入装置目录编译装置

[root@bogon src]# cd pcre-8.35[root@bogon pcre-8.35]# ./configure[root@bogon pcre-8.35]# make && make install

查看pcre版本

[root@bogon pcre-8.35]# pcre-config --version

下载、编译装置 nginx

[root@bogon src]# cd /usr/local/src/[root@bogon src]# wget http://nginx.org/download/nginx-1.18.0.tar.gz

解压安装包

[root@bogon src]# tar zxvf nginx-1.18.0.tar.gz

进入装置目录

[root@bogon src]# cd nginx-1.18.0

编译装置

[root@bogon nginx-1.18.0]# ./configure --prefix=/usr/local/webserver/nginx --with-http_stub_status_module --with-http_ssl_module --with-pcre=/usr/local/src/pcre-8.35[root@bogon nginx-1.18.0]# make[root@bogon nginx-1.18.0]# make install

查看nginx版本，看是否装置胜利

[root@bogon nginx-1.18.0]# /usr/local/webserver/nginx/sbin/nginx -v

装置胜利！！！

配置nginx、设置云服务器

配置nginx
将打包好的前端我的项目放到 nginx装置目录（/usr/local/webserver/nginx）=>html下，而后找到nginx装置目录=>conf=>nginx.conf,编辑nginx.conf文件vi nginx.conf

把这段替换成这样：

改成这样：

    location / {        index  index.html index.htm;        try_files $uri $uri/ /index.html;    }

保留文件:wq

留神：SPA是一种网络应用程序或网站的模型，所有用户交互是通过动静重写以后页面，不论咱们利用有多少页面，构建物都只会产出一个index.html，当咱们进入到子路由时刷新页面，web容器没有绝对应的页面此时会呈现404，

解决办法：只须要配置将任意页面都重定向到 index.html，把路由交由前端解决，对nginx配置文件.conf批改，增加try_files $uri $uri/ /index.html;

所以如果前端我的项目路由用的是 history 模式，如果用默认配置可能会刷新页面404的问题
详情能够参考：https://vue3js.cn/interview/v...

vue-cli官网文档: https://cli.vuejs.org/zh/conf...

启动nginx

/usr/local/webserver/nginx/sbin/nginx

设置云服务器平安组规定凋谢入口
找到云服务器控制台平安组配置规定点击一键放通

敞开防火墙：chkconfig iptables off

输出公网id地址查看成绩

到这一步就功败垂成了！！！

常用命令

/usr/local/webserver/nginx/sbin/nginx -s reload            # 从新载入配置文件/usr/local/webserver/nginx/sbin/nginx -s reopen            # 重启 Nginx/usr/local/webserver/nginx/sbin/nginx -s stop              # 进行 Nginxchkconfig iptables off                                     # 敞开防火墙/usr/local/webserver/nginx/sbin/nginx -t                   # 查看配置文件nginx.conf的命令

写在最初

我是AndyHu，目前临时是一枚前端搬砖工程师。

文中如有谬误，欢送在评论区斧正，如果这篇文章帮到了你，欢送点赞和关注

让灵魂管制本人的皮囊才是真正的自在！！！

打包前端我的项目

在服务器上（linux零碎）配置nginx

下载安装nginx

配置nginx、设置云服务器

常用命令

写在最初