Vue前台服务器搭建

前言：Vue服务器采用nginx➕Vue为服务器；

一：安装Nginx

请确保你是以拥有 sudo 权限的用户来登录的服务器
请按照下面的步骤，在 CentOS 中安装 Nginx。

1. EPEL 仓库中有 Nginx 的安装包。如果你还没有安装过 EPEL，可以通过运行下面的命令来完成安装：
   sudo yum install epel-release
   上面代码的意思是以 sudo 权限运行安装 epel-release，如果你当前登录的用户不是 root，则会提示你输入密码来运行，输入密码时是看不到输入的内容的，所以不用担心，继续输入就行。然后回车继续运行，后面的命令中如果包含 sudo 则都表明是刚提到的意思，不再重复解释。

2. 输入以下命令来安装 Nginx：
   sudo yum install nginx
   如果这是您第一次从 EPEL 仓库中安装软件，yum 可能会提示您导入 EPEL GPG key：

Retrieving key from file:///etc/pki/rpm-gpg/RPM-GPG-KEY-EPEL-7
Importing GPG key 0x352C64E5:
Userid     : "Fedora EPEL (7) "
Fingerprint: 91e9 7d7c 4a5e 96f1 7f3e 888f 6a2f aea2 352c 64e5
Package    : epel-release-7-9.noarch (@extras)
From       : /etc/pki/rpm-gpg/RPM-GPG-KEY-EPEL-7
Is this ok [y/N]:

类似于上面的内容，遇到这种情况，输入 y，然后 Enter（回车） 即可继续安装。

3. 等到安装完成以后，可以通过以下命令来设置开机启动和运行 Nginx 服务：
   设置 Nginx 开机启动：
   sudo systemctl enable nginx
   运行以上命令以后，会输出类似以下的内容，表示创建了一个软连接来关联 Nginx，不用担心，并不是报错了，下一步就可以启动 Nginx 了。

Created symlink from /etc/systemd/system/multi-user.target.wants/nginx.service to /usr/lib/systemd/system/nginx.service.

启动 Nginx：
sudo systemctl start nginx
通过运行以下命令，来检查 Nginx 的运行状态：
sudo systemctl status nginx
然后会输出类型下面的内容: 其中Active：active代表运行， failed代表暂停

● nginx.service - The nginx HTTP and reverse proxy server
  Loaded: loaded (/usr/lib/systemd/system/nginx.service; enabled; vendor preset: disabled)
  Active: active (running) since Mon 2018-03-12 16:12:48 UTC; 2s ago
  Process: 1677 ExecStart=/usr/sbin/nginx (code=exited, status=0/SUCCESS)
  Process: 1675 ExecStartPre=/usr/sbin/nginx -t (code=exited, status=0/SUCCESS)
  Process: 1673 ExecStartPre=/usr/bin/rm -f /run/nginx.pid (code=exited, status=0/SUCCESS)
Main PID: 1680 (nginx)
  CGroup: /system.slice/nginx.service
          ├─1680 nginx: master process /usr/sbin/nginx
          └─1681 nginx: worker process

4. 如果你的服务器开启了防火墙，则需要同时打开 80（HTTP）和 443（HTTPS）端口

通过下面的命令来打开这两个端口：

sudo firewall-cmd --permanent --zone=public --add-service=http
sudo firewall-cmd --permanent --zone=public --add-service=https
sudo firewall-cmd --reload

国内的服务器厂商，安全组也可能会默认屏蔽这两个端口，比如 阿里云 和 腾讯云，如果在 第 5 步 时发现无法访问，可以自行百度一下如何放开这两个端口。

5. 验证 Nginx 是否成功启动，可以在浏览器中打开 http://YOUR_IP，您将看到默认的 Nginx 欢迎页面，类似于下图所示：
   
   image.png
   
   注：Nginx 的默认欢迎页有好几种样式，和你安装的版本有关，所以大家只用关注这个页面的大标题就行了 Welcome to nginx！

通过 systemctl 管理 Nginx

你可以像管理其他服务那样管理 Nginx。

启动 Nginx
sudo systemctl start nginx

停止 Nginx
sudo systemctl stop nginx

重启 Nginx
sudo systemctl restart nginx

修改 Nginx 配置后，重新加载
sudo systemctl reload nginx

设置开机启动 Nginx
sudo systemctl enable nginx

关闭开机启动 Nginx
sudo systemctl disable nginx

Nginx 的配置文件和最佳实践

• 通过以上方式安装的 Nginx，所有相关的配置文件都在 /etc/nginx/ 目录中。
• Nginx 的主配置文件是 /etc/nginx/nginx.conf。
• 为了使 Nginx 配置更易于维护，建议为每个服务（域名）创建一个单独的配置文件。
• 每一个独立的 Nginx 服务配置文件都必须以 .conf 结尾，并存储在 /etc/nginx/conf.d 目录中。您可以根据需求，创建任意多个独立的配置文件。
• 独立的配置文件，建议遵循以下命名约定，比如你的域名是 kaifazhinan.com，那么你的配置文件的应该是这样的 /etc/nginx/conf.d/kaifazhinan.com.conf，如果你在一个服务器中部署多个服务，当然你也可以在文件名中加上 Nginx 转发的端口号，比如 kaifazhinan.com.3000.conf，这样做看起来会更加友好。
• 如果你的配置中有很多重复的代码，那么建议你创建一个 /etc/nginx/snippets 文件夹，在这里面存放所有会被复用的代码块，然后在各个需要用到的 Nginx 的配置文件中引用进去，这样可以更方便管理和修改。
• Nginx 日志文件（access.log 和 error.log ）位于 /var/log/nginx/ 目录中。建议为每个独立的服务配置不同的访问权限和错误日志文件，这样查找错误时，会更加方便快捷。
• 你可以将要部署的代码文件，存储在任何你想的位置，但是一般推荐存放在下列位置中的其中一个：

1. /home//
2. /var/www/
3. /var/www/html/
4. /opt/
5. /usr/share/nginx/html

本文引用：# 2019 年如何在 CentOS 7 上安装最新版 Nginx

二：Nginx配置

1. 转到nginx配置文件目录下，执行语句
   cd /etc/nginx/conf.d/
2. 创建配置文件****.conf
   vim ****.conf

server {
        listen       80;
        server_name localhost;

        #root /home/system_vue/lims_vue;
        location /cz {              # 子域名
            alias /home/system_vue/lims_changzheng_vue;
            try_files $uri $uri/ /cz/index.html;
            index index.html;
        }

        location /test {           # 子域名
            alias /home/system_vue/lims_vue;

            #alias /home/system_vue/lims_slz_vue;
            try_files $uri $uri/ /test/index.html;
            index index.html;
        }

        location / {
            root /home/system_vue/lims_slz_vue;

            #root /home/system_vue/lims_vue;
            try_files $uri $uri/ @router;
            index index.html;
        }

        location @router {
            rewrite ^.*$ /index.html last;
        }

}

• 关于root与alias的区别：https://foofish.net/nginx-root-different-with-alias.html
• root后面的地址是项目上传的路径。try_files是添加到index的映射。
• 对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件。因此需要rewrite到index.html中，然后交给路由在处理请求资源

3. 重启nginx
   systemctl restart nginx

4. 访问验证
   输入ip

   
   
   image.png

注意：有可能会出现403 Forbidden，执行 setenforce 0设置SELinux 成为permissive模式