準備環境
使用的是nuxt-express模板 在Linux 選的是Ubuntu系統
安裝vue cli
npm i vue-cli -D下載專案
vue init nuxt/express sexpress部署方式：
第一步先構建
npm run build 第二步啟動
pm2 start ./build/main.js此時是對映到127.0.0.1:3000
此時去訪問主機的外網ip是訪問不到的，因為對映的是內網ip，於是有些同學就把express監聽的ip去掉直接監聽80埠，就可以直接用域名訪問了，當然這樣做最簡單直接了。一般作為開發者自己就買一臺vps，土豪就不說了，當又想部署一個網站怎麼辦呢？
優雅的部署方式
前面的步驟一樣
npm run build
pm2 start build/main.js此時可以是3000 埠
然後使用nginx 作為反向代理把這個埠專門對映到一個域名上
nginx反向代理的操作方式
這有個坑，不需要為nuxt指定靜態檔案的nginx規則，坑了我很久
nginx反向配置如下
upstream shudong {
server 127.0.0.1:3000;
}
server{
listen 80;
server_name shudong.wang;
index index.html index.htm index.php default.html default.htm default.php;
location / {
proxy_set_header X-Real-Ip $remote_addr;
proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
proxy_set_header X-Nginx-Proxy true;
proxy_pass http://shudong;
proxy_redirect off;
#try_files $uri $uri/ /index.html; ##使用docker環境下這個不需要
}
location ~ /\.
{
deny all;
}
access_log /home/wwwlogs/blog.shudong.wang.log;
}
上面配置就這麼簡單
修改完配置需要重啟nginx
service reload nginx最後一步
我上面的域名是 shudong.wang
把我的這個域名解析到這個主機的外網ip就可以使用這個域名訪問了
如果還想在搭建一個node服務 或 nuxt 或其他專案
直接監聽
專案一 ：127.0.0.1:3001
對應的nginx配置
upstream shudong {
server 127.0.0.1:3001;
}
server{...}以此類推
下面貼一個正常配置的完整版本 有註釋說明坑的地方
upstream shudong {
server 127.0.0.1:3001;
}
server{
listen 80;
#listen [::]:80;
server_name shudong.wang;
index index.html index.htm index.php default.html default.htm default.php;
#root /home/wwwroot/shudong.wang; #在nuxt 動態不需要配置,靜態的可以指定
include other.conf;
#error_page 404 /404.html;
include enable-php.conf;
#下面這個解析圖片的nuxt千萬不要加
#location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
#{
# expires 30d;
#}
location / {
proxy_set_header X-Real-Ip $remote_addr;
proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
proxy_set_header X-Nginx-Proxy true;
proxy_pass http://shudong;
proxy_redirect off;
try_files $uri $uri/ /index.html;
}
#下面這個解析js的千萬不要加
#location ~ .*\.(js|css)?$
#{
# expires 12h;
#}
location ~ /\.
{
deny all;
}
access_log /home/wwwlogs/blog.shudong.wang.log;
}