Vue爬坑之路三：Nginx部署

上回我们披荆斩棘用Vue终于开发了一个小系统
现在来爬最后一个坑——项目打包部署测试环境
从来没部署过项目的小白在一脸懵逼的努力尝试
虚拟机配了一遍测试环境配了一遍坑也踩了一遍

一. 连接主机

我们的目的是在测试环境的主机上先配置一个Nginx服务器。
先在本地安装Xshell与Xftp。

准备.png

打开Xshell，输入主机名，用户名，密码，点击OK登录。

Note1：主机名一般管运维的小哥哥要地址就可以，如果没有可以在虚拟机vmware中装个linux系统（centOS之类的）作测试服务器使用。安装vmware和centOS不再详述。
需要注意的是，装完centOS之后启动系统可能会提示VT-x禁用。这时需要进入bios设置Intel Virtualization Technology为Enabled。重启方可正确进入系统。

连接成功后，黑咕隆咚什么也看不懂。传说中的Linux shell界面，下面的命令行都是在这里敲啦。

xshell.png

二. 安装Nginx

安装Ngixn需要下面几个工具。
gzip模块需要zlib库 (下载: http://www.zlib.net/)
rewrite模块需要pcre库 (下载: http://www.pcre.org/)
ssl功能需要openssl库 (下载: http://www.openssl.org/)
Nginx包（下载: http://nginx.org/en/download.html）
全部下载下来。然后使用Xftp上传到Linux系统中。

准备.png

xftp上传.png

然后依次安装openssl、zlib、pcre，Nginx包。
Step1：安装openssl
依次执行以下命令：

tar -zxvf openssl-1.0.2n.tar.gz
cd openssl-1.0.2n
./config
make
make install

运气好的话一口气执行完没有报错就是安装成功。运气不好的话，执行过程中有可能提示需要装perl5，gcc，g++，依据提示安装后，重新执行即可。

提示需要gcc.png

Note2：这里需要注意的是，如果是外网环境，直接用yum -y install gcc和yum -y install gcc-c++即可安装。但如果系统只有内网无法连接外网，则需要通过rpm包离线进行安装。
一般来讲下载以下包。

好多rpm包.png

上传到系统中，然后使用命令

rpm -Uvh *.rpm --nodeps --force

进行安装。安装完毕后可以用gcc -v与g++ -v查看成功与否。

Step2：安装zlib
和上述步骤基本一样，依次执行以下命令：

tar -zxvf zlib-1.2.11.tar.gz
cd zlib-1.2.11
./configure
make
make install

Step3：安装pcre

tar -zxvf pcre-8.42.tar.gz
cd pcre-8.42
./configure
make
make install

Step4：安装Nginx
这里只有./configure需要设置清楚。

tar -zxvf nginx-1.10.3.tar.gz
cd nginx-1.10.3
./configure --with-pcre=../pcre-8.42 --with-zlib=../zlib-1.2.11 --with-openssl=../openssl-fips-1.0.2
make
make install

完成之后，执行命令启动Nginx。

/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

此时浏览器打开主机ip所在地址，看到以下页面，则说明Nginx配置成功啦。

Nginx启动.png

Note3：如果是虚拟机装完Nginx后可能发现访问不到Nginx主页，至少我第一次没成功，这是因为防火墙配置的问题。
我测试的时候装的是CentOS7，需要进入sysconfig目录下执行以下命令打开80端口。

firewall-cmd --zone=public --add-port=80/tcp --permanent

三. 打包上传Vue

接下来，将vue工程用npm run build打包，打包完毕会在工程目录下出现一个dist文件夹，这个就是我们需要上传到服务器的静态页面。

Dist文件夹.png

把dist文件夹中的项目上传到系统中。记好上传的路径。
此时修改/usr/local/nginx/conf/下面的nginx.conf，这个是Nginx配置文件。

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

修改配置文件主要做两件事：

把Nginx服务器的默认路径改成我们项目所在的路径。
如果你的vue工程用的路由是history模式，需要将客户端发来的url重定向到默认的index.html，才能正常访问。否则只能看到主页。刷新或点击其他页面都会404。
在配置文件中的server里如下修改。

location / {
  root /home/CRExpress/www;
  try_files $uri $uri/ /index.html last;
  index index.html;
}

root后面的地址是项目上传的路径。try_files是添加到index的映射。

修改Nginx.conf.png

此后，测试nginx.conf文件并重启Nginx服务。

/usr/local/nginx/sbin/nginx -t -c /usr/local/nginx/conf/nginx.conf

cd /usr/local/nginx/sbin/
./nginx -s reload

这是打开浏览器访问主机地址，就能看到我们的项目啦。并且刷新首页也不会404了。

大功告成.png

Note4：配置完毕Nginx时还有可能出现403错误。如果ip地址没有错，权限也正常，那么很可能是SELinux设置为开启状态（enabled）的原因。
此时先查看selinux的状态。

 /usr/sbin/sestatus

如果为enforcing，需要修改config配置文件，SELINUX改成disabled并且重启服务器才能生效。

#SELINUX=enforcing
SELINUX=disabled

Note5：在用虚拟机CentOS测试时，有一次突然发现xshell链接不上虚拟机了。
检查发现是虚拟机的SSH没有正常启动。
运行service sshd status
发现Active：activating（auto-restart） 一直在启动中。
然后提示Failed to start OpenSSH Server daemon感觉是启动时卡住了。
这时输入sshd -t查看一下，提示说有好几个key没有加载。错误大概是下面这样。

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@         WARNING: UNPROTECTED PRIVATE KEY FILE!          @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Permissions 0777 for '/etc/ssh/ssh_host_ecdsa_key' are too open.
It is recommended that your private key files are NOT accessible by others.
This private key will be ignored.
bad permissions: ignore key: /etc/ssh/ssh_host_ecdsa_key
Could not load host key: /etc/ssh/ssh_host_ecdsa_key
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@         WARNING: UNPROTECTED PRIVATE KEY FILE!          @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Permissions 0777 for '/etc/ssh/ssh_host_rsa_key' are too open.
It is recommended that your private key files are NOT accessible by others.
This private key will be ignored.
bad permissions: ignore key: /etc/ssh/ssh_host_rsa_key
Could not load host key: /etc/ssh/ssh_host_rsa_key

百度发现需要修改key的模式。

#chmod 600 sshd_config ssh_host_ecdsa_key ssh_host_rsa_key
#chmod 620 moduli
#chmod 644 ssh_config ssh_host_ecdsa_key.pub ssh_host_rsa_key.pu

之后重新启动SSH。

service sshd start

成功，xshell可以连接。

Note6：上述步骤把Vue项目部署到了Nginx根目录。突发奇想想改成子目录，以为5分钟改好结果折腾了两天。。
目的是希望通过浏览器输入 http://ip地址:8090/CRExpress 来访问项目。
上最终配置。
第一步：Nginx的nginx.conf里的server这样设置：

nginx.conf.png

第二步：vue工程中，config中的index.js修改如下：

config.png

主要是assetsPublicPath: './', ./表示相对路径，默认是/。当用/的时候你会发现浏览器找不到打包后的文件。改成相对路径才可以。

控制台.png

第三步：router中的index.js修改如下：

router.png

这步需要在路由中加上base路径。如果不改路由配置，会发现即使静态文件都找到了，页面还是一片空白。原因是现在路由无法找到页面上的组件，需要将base设定为项目所在位置。

这样vue从搭建开发环境到开发到部署基本搞定。
开发环境和开发过程见爬坑之路一和二。
前两天看见一个博主说前端就是出了html css的新手村，开始打jquery，angular，vue，react等一个个boss。
整理一下接下来要挑战react啦~(。・∀・)ノ

Vue爬坑之路三：Nginx部署

一. 连接主机

二. 安装Nginx

三. 打包上传Vue

你可能感兴趣的:(Vue爬坑之路三：Nginx部署)