服務端渲染:next.js、nuxt.js等服務端渲染框架構建的專案部署到伺服器,並用PM2守護程式
最近好多夥伴說,我用vue做的專案本地是可以的,但部署到伺服器遇到好多問題:資源找不到
,直接訪問index.html頁面空白
,重新整理當前路由404
。。。用react做的專案也同樣遇到類似問題。現在我們一起討論下單頁面如何部署到伺服器?
由於前端路由緣故,單頁面應用應該放到nginx或者apache、tomcat等web代理伺服器中,千萬不要直接訪問index.html,同時要根據自己伺服器的專案路徑更改react或vue的路由地址。
如果說專案是直接跟在域名後面的,比如:http://www.sosout.com ,根路由就是 '/'。
如果說專案是直接跟在域名後面的一個子目錄中的,比如:http://www.sosout.com/children ,根路由就是 '/children ',不能直接訪問index.html。
以配置Nginx為例,配置過程大致如下:(假設:
1、專案檔案目錄: /mnt/html/spa(spa目錄下的檔案就是執行了npm run dist 後生成的dist目錄下的檔案)
2、訪問域名:spa.sosout.com)
進入nginx.conf新增如下配置:
server {
listen 80;
server_name spa.sosout.com;
root /mnt/html/spa;
index index.html;
location ~ ^/favicon\.ico$ {
root /mnt/html/spa;
}
location / {
try_files $uri $uri/ /index.html;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
access_log /mnt/logs/nginx/access.log main;
}
注意事項:1、配置域名的話,需要80埠,成功後,只要訪問域名即可訪問的專案
2、如果你使用了react-router的 browserHistory 模式或 vue-router的 history 模式,在nginx配置還需要重寫路由:
server {
listen 80;
server_name spa.sosout.com;
root /mnt/html/spa;
index index.html;
location ~ ^/favicon\.ico$ {
root /mnt/html/spa;
}
location / {
try_files $uri $uri/ @fallback;
index index.html;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location @fallback {
rewrite ^.*$ /index.html break;
}
access_log /mnt/logs/nginx/access.log main;
}
為什麼要重寫路由?因為我們的專案只有一個根入口,當輸入類似/home的url時,如果找不到對應的頁面,nginx會嘗試載入index.html,這是通過react-router或vue-router就能正確的匹配我們輸入的/home路由,從而顯示正確的home頁面,如果browserHistory模式或history模式的專案沒有配置上述內容,會出現404的情況。
簡單舉兩個例子,一個vue專案一個react專案:
vue專案:
import App from '../App'
// 首頁
const home = r => require.ensure([], () => r(require('../page/home/index')), 'home')
// 物流
const logistics = r => require.ensure([], () => r(require('../page/logistics/index')), 'logistics')
// 購物車
const cart = r => require.ensure([], () => r(require('../page/cart/index')), 'cart')
// 我的
const profile = r => require.ensure([], () => r(require('../page/profile/index')), 'profile')
// 登入介面
const login = r => require.ensure([], () => r(require('../page/user/login')), 'login')
export default [{
path: '/',
component: App, // 頂層路由,對應index.html
children: [{
path: '/home', // 首頁
component: home
}, {
path: '/logistics', // 物流
component: logistics,
meta: {
login: true
}
}, {
path: '/cart', // 購物車
component: cart,
meta: {
login: true
}
}, {
path: '/profile', // 我的
component: profile
}, {
path: '/login', // 登入介面
component: login
}, {
path: '*',
redirect: '/home'
}]
}]
############
# 其他配置
############
http {
############
# 其他配置
############
server {
listen 80;
server_name tb.sosout.com;
root /mnt/html/tb;
index index.html;
location ~ ^/favicon\.ico$ {
root /mnt/html/tb;
}
location / {
try_files $uri $uri/ @fallback;
index index.html;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location @fallback {
rewrite ^.*$ /index.html break;
}
access_log /mnt/logs/nginx/access.log main;
}
############
# 其他配置
############
}
react專案:
/**
* 疑惑一:
* React createClass 和 extends React.Component 有什麼區別?
* 之前寫法:
* let app = React.createClass({
* getInitialState: function(){
* // some thing
* }
* })
* ES6寫法(通過es6類的繼承實現時state的初始化要在constructor中宣告):
* class exampleComponent extends React.Component {
* constructor(props) {
* super(props);
* this.state = {example: 'example'}
* }
* }
*/
import React, {Component, PropTypes} from 'react'; // react核心
import { Router, Route, Redirect, IndexRoute, browserHistory, hashHistory } from 'react-router'; // 建立route所需
import Config from '../config/index';
import layout from '../component/layout/layout'; // 佈局介面
import login from '../containers/login/login'; // 登入介面
/**
* (路由根目錄元件,顯示當前符合條件的元件)
*
* @class Roots
* @extends {Component}
*/
class Roots extends Component {
render() {
// 這個元件是一個包裹元件,所有的路由跳轉的頁面都會以this.props.children的形式載入到本元件下
return (
<div>{this.props.children}</div>
);
}
}
// const history = process.env.NODE_ENV !== 'production' ? browserHistory : hashHistory;
// 快速入門
const home = (location, cb) => {
require.ensure([], require => {
cb(null, require('../containers/home/homeIndex').default)
}, 'home');
}
// 百度圖表-折線圖
const chartLine = (location, cb) => {
require.ensure([], require => {
cb(null, require('../containers/charts/lines').default)
}, 'chartLine');
}
// 基礎元件-按鈕
const button = (location, cb) => {
require.ensure([], require => {
cb(null, require('../containers/general/buttonIndex').default)
}, 'button');
}
// 基礎元件-圖示
const icon = (location, cb) => {
require.ensure([], require => {
cb(null, require('../containers/general/iconIndex').default)
}, 'icon');
}
// 使用者管理
const user = (location, cb) => {
require.ensure([], require => {
cb(null, require('../containers/user/userIndex').default)
}, 'user');
}
// 系統設定
const setting = (location, cb) => {
require.ensure([], require => {
cb(null, require('../containers/setting/settingIndex').default)
}, 'setting');
}
// 廣告管理
const adver = (location, cb) => {
require.ensure([], require => {
cb(null, require('../containers/adver/adverIndex').default)
}, 'adver');
}
// 元件一
const oneui = (location, cb) => {
require.ensure([], require => {
cb(null, require('../containers/ui/oneIndex').default)
}, 'oneui');
}
// 元件二
const twoui = (location, cb) => {
require.ensure([], require => {
cb(null, require('../containers/ui/twoIndex').default)
}, 'twoui');
}
// 登入驗證
const requireAuth = (nextState, replace) => {
let token = (new Date()).getTime() - Config.localItem('USER_AUTHORIZATION');
if(token > 7200000) { // 模擬Token儲存2個小時
replace({
pathname: '/login',
state: { nextPathname: nextState.location.pathname }
});
}
}
const RouteConfig = (
<Router history={browserHistory}>
<Route path="/home" component={layout} onEnter={requireAuth}>
<IndexRoute getComponent={home} onEnter={requireAuth} /> // 預設載入的元件,比如訪問www.test.com,會自動跳轉到www.test.com/home
<Route path="/home" getComponent={home} onEnter={requireAuth} />
<Route path="/chart/line" getComponent={chartLine} onEnter={requireAuth} />
<Route path="/general/button" getComponent={button} onEnter={requireAuth} />
<Route path="/general/icon" getComponent={icon} onEnter={requireAuth} />
<Route path="/user" getComponent={user} onEnter={requireAuth} />
<Route path="/setting" getComponent={setting} onEnter={requireAuth} />
<Route path="/adver" getComponent={adver} onEnter={requireAuth} />
<Route path="/ui/oneui" getComponent={oneui} onEnter={requireAuth} />
<Route path="/ui/twoui" getComponent={twoui} onEnter={requireAuth} />
</Route>
<Route path="/login" component={Roots}> // 所有的訪問,都跳轉到Roots
<IndexRoute component={login} /> // 預設載入的元件,比如訪問www.test.com,會自動跳轉到www.test.com/home
</Route>
<Redirect from="*" to="/home" />
</Router>
);
export default RouteConfig;
############
# 其他配置
############
http {
############
# 其他配置
############
server {
listen 80;
server_name antd.sosout.com;
root /mnt/html/reactAntd;
index index.html;
location ~ ^/favicon\.ico$ {
root /mnt/html/reactAntd;
}
location / {
try_files $uri $uri/ @router;
index index.html;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location @router {
rewrite ^.*$ /index.html break;
}
access_log /mnt/logs/nginx/access.log main;
}
############
# 其他配置
############
}