上回我們披荊斬棘用Vue終于開發(fā)了一個(gè)小系統(tǒng)
現(xiàn)在來爬最后一個(gè)坑——項(xiàng)目打包部署測試環(huán)境
從來沒部署過項(xiàng)目的小白在一臉懵逼的努力嘗試
虛擬機(jī)配了一遍測試環(huán)境配了一遍坑也踩了一遍
一. 連接主機(jī)
我們的目的是在測試環(huán)境的主機(jī)上先配置一個(gè)Nginx服務(wù)器。
先在本地安裝Xshell與Xftp。
打開Xshell，輸入主機(jī)名，用戶名，密碼，點(diǎn)擊OK登錄。
Note1：主機(jī)名一般管運(yùn)維的小哥哥要地址就可以，如果沒有可以在虛擬機(jī)vmware中裝個(gè)linux系統(tǒng)（centOS之類的）作測試服務(wù)器使用。安裝vmware和centOS不再詳述。
需要注意的是，裝完centOS之后啟動(dòng)系統(tǒng)可能會提示VT-x禁用。這時(shí)需要進(jìn)入bios設(shè)置Intel Virtualization Technology為Enabled。重啟方可正確進(jìn)入系統(tǒng)。
連接成功后，黑咕隆咚什么也看不懂。傳說中的Linux shell界面，下面的命令行都是在這里敲啦。
二. 安裝Nginx
安裝Ngixn需要下面幾個(gè)工具。
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系統(tǒng)中。
然后依次安裝openssl、zlib、pcre，Nginx包。
Step1：安裝openssl
依次執(zhí)行以下命令：
tar -zxvf openssl-1.0.2n.tar.gz
cd openssl-1.0.2n
./config
make
make install
運(yùn)氣好的話一口氣執(zhí)行完沒有報(bào)錯(cuò)就是安裝成功。運(yùn)氣不好的話，執(zhí)行過程中有可能提示需要裝perl5，gcc，g++，依據(jù)提示安裝后，重新執(zhí)行即可。
Note2：這里需要注意的是，如果是外網(wǎng)環(huán)境，直接用yum -y install gcc和yum -y install gcc-c++即可安裝。但如果系統(tǒng)只有內(nèi)網(wǎng)無法連接外網(wǎng)，則需要通過rpm包離線進(jìn)行安裝。
一般來講下載以下包。
上傳到系統(tǒng)中，然后使用命令
rpm -Uvh *.rpm --nodeps --force
進(jìn)行安裝。安裝完畢后可以用gcc -v與g++ -v查看成功與否。
Step2：安裝zlib
和上述步驟基本一樣，依次執(zhí)行以下命令：
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需要設(shè)置清楚。
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
完成之后，執(zhí)行命令啟動(dòng)Nginx。
/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
此時(shí)瀏覽器打開主機(jī)ip所在地址，看到以下頁面，則說明Nginx配置成功啦。
Note3：如果是虛擬機(jī)裝完Nginx后可能發(fā)現(xiàn)訪問不到Nginx主頁，至少我第一次沒成功，這是因?yàn)榉阑饓ε渲玫膯栴}。
我測試的時(shí)候裝的是CentOS7，需要進(jìn)入sysconfig目錄下執(zhí)行以下命令打開80端口。
firewall-cmd --zone=public --add-port=80/tcp --permanent
三. 打包上傳Vue
接下來，將vue工程用npm run build打包，打包完畢會在工程目錄下出現(xiàn)一個(gè)dist文件夾，這個(gè)就是我們需要上傳到服務(wù)器的靜態(tài)頁面。
把dist文件夾中的項(xiàng)目上傳到系統(tǒng)中。記好上傳的路徑。
此時(shí)修改/usr/local/nginx/conf/下面的nginx.conf，這個(gè)是Nginx配置文件。
cd /usr/local/nginx/conf/
vim nginx.conf
修改配置文件主要做兩件事：
- 把Nginx服務(wù)器的默認(rèn)路徑改成我們項(xiàng)目所在的路徑。
- 如果你的vue工程用的路由是history模式，需要將客戶端發(fā)來的url重定向到默認(rèn)的index.html，才能正常訪問。否則只能看到主頁。刷新或點(diǎn)擊其他頁面都會404。
在配置文件中的server里如下修改。
location / {
root /home/CRExpress/www;
try_files $uri $uri/ /index.html last;
index index.html;
}
root后面的地址是項(xiàng)目上傳的路徑。try_files是添加到index的映射。
此后，測試nginx.conf文件并重啟Nginx服務(wù)。
/usr/local/nginx/sbin/nginx -t -c /usr/local/nginx/conf/nginx.conf
cd /usr/local/nginx/sbin/
./nginx -s reload
這是打開瀏覽器訪問主機(jī)地址，就能看到我們的項(xiàng)目啦。并且刷新首頁也不會404了。
Note4：配置完畢Nginx時(shí)還有可能出現(xiàn)403錯(cuò)誤。如果ip地址沒有錯(cuò)，權(quán)限也正常，那么很可能是SELinux設(shè)置為開啟狀態(tài)（enabled）的原因。
此時(shí)先查看selinux的狀態(tài)。
/usr/sbin/sestatus
如果為enforcing，需要修改config配置文件，SELINUX改成disabled并且重啟服務(wù)器才能生效。
#SELINUX=enforcing
SELINUX=disabled
Note5：在用虛擬機(jī)CentOS測試時(shí)，有一次突然發(fā)現(xiàn)xshell鏈接不上虛擬機(jī)了。
檢查發(fā)現(xiàn)是虛擬機(jī)的SSH沒有正常啟動(dòng)。
運(yùn)行service sshd status
發(fā)現(xiàn)Active：activating（auto-restart） 一直在啟動(dòng)中。
然后提示Failed to start OpenSSH Server daemon感覺是啟動(dòng)時(shí)卡住了。
這時(shí)輸入sshd -t查看一下，提示說有好幾個(gè)key沒有加載。錯(cuò)誤大概是下面這樣。
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@ 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
百度發(fā)現(xiàn)需要修改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
之后重新啟動(dòng)SSH。
service sshd start
成功，xshell可以連接。
Note6：上述步驟把Vue項(xiàng)目部署到了Nginx根目錄。突發(fā)奇想想改成子目錄，以為5分鐘改好結(jié)果折騰了兩天。。
目的是希望通過瀏覽器輸入 http://ip地址:8090/CRExpress 來訪問項(xiàng)目。
上最終配置。
第一步：Nginx的nginx.conf里的server這樣設(shè)置：
第二步：vue工程中，config中的index.js修改如下：
主要是assetsPublicPath: './', ./表示相對路徑，默認(rèn)是/。當(dāng)用/的時(shí)候你會發(fā)現(xiàn)瀏覽器找不到打包后的文件。改成相對路徑才可以。
第三步：router中的index.js修改如下：
這步需要在路由中加上base路徑。如果不改路由配置，會發(fā)現(xiàn)即使靜態(tài)文件都找到了，頁面還是一片空白。原因是現(xiàn)在路由無法找到頁面上的組件，需要將base設(shè)定為項(xiàng)目所在位置。
這樣vue從搭建開發(fā)環(huán)境到開發(fā)到部署基本搞定。
開發(fā)環(huán)境和開發(fā)過程見爬坑之路一和二。
前兩天看見一個(gè)博主說前端就是出了html css的新手村，開始打jquery，angular，vue，react等一個(gè)個(gè)boss。
整理一下接下來要挑戰(zhàn)react啦~(。???)ノ
