作為前端er凸克，服務(wù)部署雖然不是必備技能，但也不可避免的會(huì)有一些公司需要前端自己來(lái)部署前端代碼闷沥，今天就簡(jiǎn)單的介紹下如何使用nginx進(jìn)行靜態(tài)資源部署和接口代理萎战。
一、利用nginx搭建靜態(tài)資源服務(wù)器
- nginx安裝
yum install nginx
- 啟動(dòng)nginx
service nginx start
- 查看是否啟動(dòng)成功
service nginx status
// 如何active 顯示running就表示已經(jīng)啟動(dòng)成功
此時(shí)舆逃，可以在終端通過(guò)curl:http://服務(wù)器ip或者在瀏覽器輸入ip地址訪問(wèn)蚂维，默認(rèn)80端口，如果成功會(huì)顯示welcome nginx頁(yè)面路狮。
注意：如果通過(guò)ip無(wú)法訪問(wèn)虫啥，可通過(guò)以下兩種方式排查：
1)、是否關(guān)閉防火墻
CentOS防火墻默認(rèn)是firewalld,關(guān)閉防火墻可通過(guò)以下命令：
systemctl stop firewalld
2)奄妨、80端口是否開放
阿里云CentOS系統(tǒng)默認(rèn)80端口是不開放的涂籽，因此需要登錄阿里云官方進(jìn)行配置，具體配置如下：
配置路徑：登錄阿里云-控制臺(tái)-云服務(wù)器ECS-實(shí)例-更多-網(wǎng)絡(luò)和安全組-安全組配置-配置規(guī)則-添加安全組規(guī)則
ps: 規(guī)則方向選入方向砸抛，端口范圍寫80/80评雌，授權(quán)對(duì)象寫0.0.0.0/0
二、靜態(tài)資源文件上傳到服務(wù)器
1直焙、安裝文件上傳插件lrzsz
阿里云默認(rèn)安裝了
lrzsz插件景东，可以直接使用rz命令上傳文件，如果沒有,可以使用以下命令安裝：
yum install lrzsz
2奔誓、創(chuàng)建靜態(tài)資源上傳文件夾
在服務(wù)器根目錄的
home目錄下創(chuàng)建靜態(tài)資源上傳文件夾html
// 切換到home目錄
cd /home
// 創(chuàng)建html文件夾
mkdir html
3斤吐、將靜態(tài)資源文件上傳到服務(wù)器指定目錄
- 上傳文件
cd切換到
html目錄下，執(zhí)行rz命令會(huì)彈出文件選擇框厨喂，選擇你要上傳的靜態(tài)資源(壓縮包),確定后開始上傳和措。 - 解壓資源
上傳靜態(tài)資源包到服務(wù)器后需要進(jìn)行解壓
unzip test.zip
三、 nginx配置
- 查看nginx安裝位置
whereis nginx
- 進(jìn)入nginx配置文件目錄
cd /etc/nginx/ 找到nginx.conf文件
- 打開配置文件
vim nginx.conf
- 代理配置
server {
// 訪問(wèn)端口號(hào)
listen 80;
// 服務(wù)器地址(訪問(wèn)ip)
server_name 116.62.238.176;
include /etc/nginx/default.d/*.conf;
// 靜態(tài)資源文件
location / {
// 靜態(tài)資源存放路徑
root /home/html/;
// 默認(rèn)讀取文件
index index.html index.htm;
// 如果單頁(yè)面應(yīng)用的history模式杯聚，需要添加下面配置
try_files $uri $uri/ /index.html;
}
// 接口代理
location /api {
// 后端代碼接口地址
proxy_pass: http://120.78.xx.xx:8071;
}
error_page 404 /404.html;
location = /40x.html {
}
- 重啟nginx
nginx -s reload
至此臼婆，通過(guò)服務(wù)器ip在瀏覽器訪問(wèn)就可以看到部署的靜態(tài)資源了。
