title: Nginx學(xué)習(xí)筆記-項(xiàng)目部署
date: 2018-08-18
tags: [nginx]
categories: 運(yùn)維知識
nginx 學(xué)習(xí)筆記-項(xiàng)目部署
當(dāng)項(xiàng)目在本地開發(fā)完畢后逢捺，我們需要將項(xiàng)目部署到服務(wù)器上
# nginx目錄
/data/www
# nginx配置文件位置
/etc/nginx/nginx.conf
通過 ssh 登錄 centos 服務(wù)器
關(guān)鍵：ssh 相關(guān)知識
在本地通過 scp 將壓縮后的打包文件上傳至服務(wù)器
關(guān)鍵：scp/壓縮/解壓縮等命令
進(jìn)行配置 nginx
現(xiàn)在我們已經(jīng)將壓縮文件解壓，并將里面的內(nèi)容移至了/data/www根目錄，直接訪問服務(wù)器地址[默認(rèn)為 80 端口]應(yīng)當(dāng)是直接可以訪問到 html 文件的，這已經(jīng)很好了，我們的前端項(xiàng)目已經(jīng)可以被別人訪問璧微，但是還有一些問題：
- 單頁面應(yīng)用刷新報(bào) 404 錯(cuò)誤
- 如何將接口代理至其他服務(wù)
解決刷新 404 問題
react-router和vue-router是我們常用的前端路由庫，監(jiān)聽 url 的變化刷新視圖，注意這一過程和傳統(tǒng)的多頁應(yīng)用不一樣澜掩，是沒有經(jīng)過服務(wù)端的，也就是說如果進(jìn)行刷新杖挣，瀏覽器請求服務(wù)端的相應(yīng)路徑肩榕，但是我們知道服務(wù)端根本沒有對這個(gè)路徑進(jìn)行任何處理，即服務(wù)端該路徑不存在任何文件也沒有代理到別處惩妇，所以就產(chǎn)生了 404 問題株汉。
解決方法：代理到index.html筐乳，重新通過前端路由進(jìn)行渲染
實(shí)際配置如下：
location / {
try_files $uri /index.html;
index index.html;
}
如此一來，我們所有的請求都會直接定位到index.html乔妈，由 js 接手頁面的渲染蝙云。
api 接口轉(zhuǎn)發(fā)
目前通過 nginx 監(jiān)聽 80 端口，并部署了前端項(xiàng)目路召。
在服務(wù)器 3000 端口上啟動了 api 服務(wù)勃刨，在前端項(xiàng)目中通過/api/personalized的形式進(jìn)行請求，我們知道這種方式默認(rèn)是請求http//your-server/api/personalized的股淡，很明顯身隐，80 端口上并沒有該服務(wù)，我們需要監(jiān)聽來自 80 端口以/api/開頭的請求唯灵，將其轉(zhuǎn)到服務(wù)器本機(jī)的 3000 端口贾铝，即/api/personalized實(shí)際請求的地址為http:your-server:3000/personalized，注意早敬，我們通過添加了/api/前綴來區(qū)分接口忌傻，所以轉(zhuǎn)發(fā)時(shí)還需要移除該前綴。
實(shí)際配置如下：
location /api/ {
rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://localhost:3000;
}
