title: Nginx學習筆記-項目部署
date: 2018-08-18
tags: [nginx]
categories: 運維知識

nginx 學習筆記-項目部署

當項目在本地開發(fā)完畢后，我們需要將項目部署到服務器上

# nginx目錄
/data/www

# nginx配置文件位置
/etc/nginx/nginx.conf

通過 ssh 登錄 centos 服務器

關鍵：ssh 相關知識

在本地通過 scp 將壓縮后的打包文件上傳至服務器

關鍵：scp/壓縮/解壓縮等命令

進行配置 nginx

現(xiàn)在我們已經(jīng)將壓縮文件解壓，并將里面的內容移至了/data/www根目錄，直接訪問服務器地址[默認為 80 端口]應當是直接可以訪問到 html 文件的，這已經(jīng)很好了，我們的前端項目已經(jīng)可以被別人訪問，但是還有一些問題：

1. 單頁面應用刷新報 404 錯誤
2. 如何將接口代理至其他服務

解決刷新 404 問題

react-router和vue-router是我們常用的前端路由庫，監(jiān)聽 url 的變化刷新視圖，注意這一過程和傳統(tǒng)的多頁應用不一樣，是沒有經(jīng)過服務端的，也就是說如果進行刷新，瀏覽器請求服務端的相應路徑，但是我們知道服務端根本沒有對這個路徑進行任何處理，即服務端該路徑不存在任何文件也沒有代理到別處，所以就產(chǎn)生了 404 問題。

解決方法：代理到index.html，重新通過前端路由進行渲染

實際配置如下：

location / {
    try_files $uri /index.html;
    index index.html;
}

如此一來，我們所有的請求都會直接定位到index.html，由 js 接手頁面的渲染。

api 接口轉發(fā)

目前通過 nginx 監(jiān)聽 80 端口，并部署了前端項目。

在服務器 3000 端口上啟動了 api 服務，在前端項目中通過/api/personalized的形式進行請求，我們知道這種方式默認是請求http//your-server/api/personalized的，很明顯，80 端口上并沒有該服務，我們需要監(jiān)聽來自 80 端口以/api/開頭的請求，將其轉到服務器本機的 3000 端口，即/api/personalized實際請求的地址為http:your-server:3000/personalized，注意，我們通過添加了/api/前綴來區(qū)分接口，所以轉發(fā)時還需要移除該前綴。

實際配置如下：

location /api/ {
    rewrite ^/api/(.*)$ /$1 break;
    proxy_pass   http://localhost:3000;
}