嘗試 Docker Nginx 部署單頁應用

2021-09-12 17:39:40 字數 1630 閱讀 1845

當我們開發乙個單頁面應用時,執行完構建後

npm run build
會生成乙個 index.html 在 dist 目錄,那怎麼把這個 index.html 部署到伺服器上呢?

挑幾點配置講講,先是 gzip 壓縮資源,以節省頻寬和提高瀏覽器載入速度

雖然 webpack 已經支援在構建時就生成 .gz 壓縮包,但也可以通過 nginx 來啟用
gzip on;

gzip_disable "msie6";

# 0-9 等級,級別越高,壓縮包越小,但對伺服器效能要求也高

gzip_comp_level 9;

gzip_min_length 100;

# gzip 不支援壓縮,我們只需要壓縮前端資源

再就是服務埠的配置,將 api 反向**到後端服務

server 

location /api/v1

}

完整配置長這樣

}}這裡簡單一點,基於基礎映象,拷貝我們寫好的 nginx.conf 和 index.html 到映象內

from nginx:alpine

copy nginx.conf /etc/nginx/nginx.conf

copy dist /usr/share/nginx/html

完成了上面的準備,就可以編寫命令來執行映象的打包了

先給映象取個名稱和埠號

port = 8080

通過 build 來打包映象

build:

cp docker/dockerfile .

cp docker/nginx.conf .

rm dockerfile

rm nginx.conf

通過 deploy 來啟動映象

deploy:
最後還有個 stop 來停止和清理映象

stop:
完整配置長這樣

port = 8080

build:

cp docker/dockerfile .

cp docker/nginx.conf .

rm dockerfile

rm nginx.conf

deploy:

stop:

完整命令長這樣

# 靜態資源構建

npm run build

# 映象打包

make build

# 停止並刪除舊映象(首次可忽略)

make stop

# 映象啟動

make deploy

目前的部署方法相對簡單,後續會加入基礎映象和映象倉庫的使用,先去前面探探路

嘗試 Docker Nginx 部署單頁應用

當我們開發乙個單頁面應用時,執行完構建後 npm run build會生成乙個 index.html 在 dist 目錄,那怎麼把這個 index.html 部署到伺服器上呢?挑幾點配置講講,先是 gzip 壓縮資源,以節省頻寬和提高瀏覽器載入速度 雖然 webpack 已經支援在構建時就生成 gz...

嘗試 Docker Nginx 部署單頁應用

當我們開發乙個單頁面應用時,執行完構建後 npm run build會生成乙個 index.html 在 dist 目錄,那怎麼把這個 index.html 部署到伺服器上呢?挑幾點配置講講,先是 gzip 壓縮資源,以節省頻寬和提高瀏覽器載入速度 雖然 webpack 已經支援在構建時就生成 gz...

CentOS7 Docker Nginx部署及執行

網上找了一些資料部署,出現不一樣的問題,現在總結一下自己的部署流程 1 資源準備 dockerfile檔案 ported by adam miller from originally written for fedora dockerfiles by scollier from centos cen...