从零开始用nginx+云服务器部署前端项目

打包前端项目

以我自己的项目为例子

  1. 在项目根路径下的vue.config.js里面配置部署应用包时的基本 URL publicPath,不配置的话默认是 publickPath:"/"

    module.exports = {
      publicPath: "/",
    };
  2. 为了统一vue-router路由的basepublickPath,可以这样写:

    const router = new VueRouter({
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })

    打包完前端项目后需要将要打包好的dist里面的文件放到服务器上,然后再配置nginx

    在服务器上(linux系统)配置nginx

    因为我的项目用的是腾讯云服务器(centos6.5),所以我就以这个举例子了

下载安装nginx

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

  1. 安装编译工具及文库

    yum -y install make zlib zlib-devel gcc-c++ libtool  openssl openssl-devel
  2. 先要安装 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
  3. 解压安装包
[root@bogon src]# tar zxvf pcre-8.35.tar.gz
  1. 进入安装目录编译安装

    [root@bogon src]# cd pcre-8.35
    [root@bogon pcre-8.35]# ./configure
    [root@bogon pcre-8.35]# make && make install
  2. 查看pcre版本

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

image.png

  1. 下载、编译安装 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
  2. 查看nginx版本,看是否安装成功

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

image.png
安装成功!!!

配置nginx、设置云服务器

  1. 配置nginx
    将打包好的前端项目放到 nginx安装目录(/usr/local/webserver/nginx)=>html下,然后找到nginx安装目录=>conf=>nginx.conf,编辑nginx.conf文件vi nginx.conf

    把这段替换成这样:

从零开始用nginx+云服务器部署前端项目_第1张图片
改成这样:

    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...

  1. 启动nginx
/usr/local/webserver/nginx/sbin/nginx
  1. 设置云服务器安全组规则开放入口
    找到云服务器控制台安全组配置规则点击一键放通

从零开始用nginx+云服务器部署前端项目_第2张图片

关闭防火墙:chkconfig iptables off

输入公网id地址查看成果

从零开始用nginx+云服务器部署前端项目_第3张图片
到这一步就大功告成了!!!

常用命令

/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              # 停止 Nginx
chkconfig iptables off                                     # 关闭防火墙
/usr/local/webserver/nginx/sbin/nginx -t                   # 检查配置文件nginx.conf的命令

写在最后

我是AndyHu,目前暂时是一枚前端搬砖工程师。

文中如有错误,欢迎在评论区指正,如果这篇文章帮到了你,欢迎点赞和关注

让灵魂控制自己的皮囊才是真正的自由!!!

你可能感兴趣的:(从零开始用nginx+云服务器部署前端项目)