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 gccyum -y install gcc-c++即可安装。但如果系统只有内网无法连接外网,则需要通过rpm包离线进行安装。
一般来讲下载以下包。

好多rpm包.png

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

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

进行安装。安装完毕后可以用gcc -vg++ -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

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

  1. 把Nginx服务器的默认路径改成我们项目所在的路径。
  2. 如果你的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啦~(。・∀・)ノ

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容

  • Page 1:nginx 服务器安装及配置文件详解 CentOS 6.2 x86_64 安装 nginx 1.1 ...
    xiaojianxu阅读 8,442评论 1 41
  • nginx在工作中已经有好几个环境在使用了,每次都是重新去网上扒博客,各种编译配置,今天自己也整理一份安装文档和n...
    AndyChin阅读 2,261评论 0 4
  • 一、Linux下安装配置nginx 第一次安装nginx,中间出现的问题一步步解决。 用到的工具secureCRT...
    yljava阅读 1,541评论 0 0
  • 已到四十不惑的年龄,少了许多的迷茫,少了许多的敬畏,也少了许多的顾忌,许多事许多人都能去看清了。少了童年的天真,少...
    绿塬阅读 317评论 0 1
  • 我曾向所有人宣扬,我要的爱,是死心塌地、矢志不渝的。 可是后来我却开始见异思迁、朝秦暮楚。惜白,我不想说,这全...
    北方不见北阅读 317评论 0 0