2. it技术
  3. Vue爬坑之路三：Nginx部署

Vue爬坑之路三：Nginx部署

it2023-06-02  80

上回我们披荆斩棘用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从搭建开发环境到开发到部署基本搞定。 开发环境和开发过程见爬坑之路一和二。 转载：链接：https://www.jianshu.com/p/05f889faa74b  

最新回复(0)