CentOS7下安装Nginx以及部署Vue项目

Vue项目开发完成之后，接下来就是要部署到服务器上了，首先，我们需要安装Nginx。

1、Nginx安装

1.1、一些必要依赖的安装

首先需要安装pcre pcre-devel 和Zlib，pcre (Perl Compatible Regular Expressions) 是一个Perl库，包括 perl 兼容的正则表达式库。nginx 的 http 模块使用 pcre 来解析正则表达式，所以需要在 linux 上安装 pcre 库，pcre-devel 是使用 pcre 开发的一个二次开发库。nginx也需要此库。

 yum install -y pcre pcre-devel

接下来安装zlib，用以nginx对http包进行gzip压缩

yum install -y zlib zlib-devel

然后就是gcc编译器以及openssl

yum install gcc-c++
yum install -y openssl openssl-devel

1.2、正式安装Nginx

接下来正式进入Nginx的安装，下载地址https://nginx.org/download/，这里我用的是1.16.1版本。

下载完成后解压，同时进入解压后得到的目录：

tar -xvf nginx-1.16.1.tar.gz
cd nginx-1.16.1

使用nginx的默认配置进行编译安装

./configure
make & make install

命令解释（原文：https://blog.csdn.net/qiushisoftware/article/details/79520869）

1、configure命令

　　这一步一般用来生成 Makefile，为下一步的编译做准备，你可以通过在 configure 后加上参数来对安装进行控制，比如代码:./configure –prefix=/usr 意思是将该软件安装在 /usr 下面，执行文件就会安装在 /usr/bin （而不是默认的 /usr/local/bin),资源文件就会安装在 /usr/share（而不是默认的/usr/local/share）。同时一些软件的配置文件你可以通过指定 –sys-config= 参数进行设定。有一些软件还可以加上 –with、–enable、–without、–disable 等等参数对编译加以控制，你可以通过允许 ./configure –help 查看详细的说明帮助。

2、make

　　这一步就是编译，大多数的源代码包都经过这一步进行编译（当然有些perl或python编写的软件需要调用perl或python来进行编译）。如果在 make 过程中出现 error ，你就要记下错误代码（注意不仅仅是最后一行），然后你可以向开发者提交 bugreport（一般在 INSTALL 里有提交地址），或者你的系统少了一些依赖库等，这些需要自己仔细研究错误代码。

　　可能遇到的错误：make *** 没有指明目标并且找不到 makefile。问题很明了，没有Makefile，怎么办，原来是要先./configure 一下，再make。

3、make install

　　这条命令来进行安装（当然有些软件需要先运行 make check 或 make test 来进行一些测试），这一步一般需要你有 root 权限（因为要向系统写入文件）。

安装完成之后，可以使用whereis命令查看nginx程序在哪个地方

whereis nginx

下面是我的路径

可执行文件在/usr/local/nginx/sbin目录下，进入该目录运行nginx：

cd /usr/local/nginx/sbin
./nginx

默认占用80端口，直接在浏览器地址栏输入ip或者域名就能看到nginx的欢迎页面了

配置开机自动启动：

# 往/etc/rc.local中追加一行
echo "/usr/local/nginx/sbin/nginx" >> /etc/rc.local
# 修改权限
chmod 755 /etc/rc.local

停止服务的话则通过：

ps -ef | grep nginx
kill (pid)

这里我用的是阿里云的服务器，需要先在安全组上开放端口，同时服务器如果开启了防火墙的话，也要开放80端口以及http服务。下面简单介绍一下流程。

1.3、阿里云及服务器防火墙开放80端口

1.3.1、阿里云添加安全组规则

进入阿里云控制台之后选择自己的实例，再选择本实例安全组 -> 配置规则：

然后选择右上角的添加安全组规则，输入端口范围及授权对象（0.0.0.0/0即授权任何用户）：

同理可以开放其他的端口，如3306（mysql）、6379（redis）、443（https）等等。

这里插个题外话，就是阿里云默认把25（SMTP）端口的出方向禁用了，我在项目中用到了邮件发送的功能，因此项目中需要换成465（SMTPS）端口发邮件。

1.3.2、防火墙开放端口及服务

首先是防火墙几个常用命令：

systemctl start firewalld            # 开启防火墙
systemctl stop firewalld            # 关闭防火墙
systemctl status firewalld            # 查看防火墙状态
systemctl enable firewalld            # 开机自动启动
systemctl disable firewalld            # 关闭开机启动

然后是firewall-cmd命令，比如开放80端口以及http/https服务：

firewall-cmd --zone=public(作用域) --add-port=80/tcp(端口和访问类型) --permanent(永久生效)
firewall-cmd --zone=public --add-service=http --permanent
firewall-cmd --zone=public --add-service=https --permanent

# 修改防火墙规则后，需要重新载入
firewall-cmd --reload
# 查看端口开放状态以及删除规则命令
firewall-cmd --zone= public --query-port=80/tcp
firewall-cmd --zone= public --remove-port=80/tcp --permanent
# 查看开放的端口及服务
firewall-cmd --list-ports
firewall-cmd --list-services

同理可以开放其他的端口及服务。

1.4、Vue项目部署

首先将打包好的项目放到服务器上，注意不要放在/root（如果是root用户，主目录~就是/root目录）目录下，否则nginx会无法访问到，接下来配置nginx.config：

 cd /usr/local/nginx/conf/
 vim nginx.conf

配置如下：

server {
        listen       80;
        server_name  www.panzvor.com;   # 域名或者ip
        root   /usr/local/www/dist;  # vue项目目录
        charset utf-8;

        #access_log  logs/host.access.log  main;

        location / {
           try_files $uri $uri/ /index.html;  # 防止在nginx中刷新出现404
           index  index.html index.htm;
        }

然后浏览器访问自己的域名就能访问到自己的项目了。

不过到这里还有一个问题，就是无法请求到后台的数据接口，因此还需要做一些配置，在vue.config.js文件中：

  devServer: {
    proxy: {
      '/': {
        target: 'http://xxx:8080', //源地址
        changeOrigin: true, //改变源
        pathRewrite: {
          '^/api': 'http://xxx:8080' //路径重写
        } 
      }
    }
  }
}

然后nginx.conf也需要加一段配置：

location /api/ {
            rewrite  ^.+api/?(.*)$ /$1 break;
            proxy_pass   http://xxx:8080;
        }

成功访问！

posted @ 2020-07-03 15:49 PanzVor 阅读(509) 评论(0) 收藏举报

刷新页面返回顶部

PanzVor