您好,登錄后才能下訂單哦!
這篇文章主要介紹“Docker+Nginx怎么部署單頁應(yīng)用”的相關(guān)知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“Docker+Nginx怎么部署單頁應(yīng)用”文章能幫助大家解決問題。
開發(fā)到部署,親力親為
當(dāng)我們開發(fā)一個單頁面應(yīng)用時,執(zhí)行完構(gòu)建后
npm run build
會生成一個 index.html 在 dist 目錄,那怎么把這個 index.html 部署到服務(wù)器上呢?
目錄結(jié)構(gòu)
dist/:前端構(gòu)建完的靜態(tài)文件
docker/:鏡像所需的配置文件
配置 nginx
挑幾點配置講講,先是 gzip 壓縮資源,以節(jié)省帶寬和提高瀏覽器加載速度
雖然 webpack 已經(jīng)支持在構(gòu)建時就生成 .gz 壓縮包,但也可以通過 nginx 來啟用
gzip on; gzip_disable "msie6"; # 0-9 等級,級別越高,壓縮包越小,但對服務(wù)器性能要求也高 gzip_comp_level 9; gzip_min_length 100; # gzip 不支持壓縮圖片,我們只需要壓縮前端資源 gzip_types text/css application/javascript;
再就是服務(wù)端口的配置,將 api 反向代理到后端服務(wù)
server { listen 8080; server_name www.frontend.com; root /usr/share/nginx/html/; location / { index index.html index.htm; try_files $uri $uri/ /index.html; # 禁止緩存 html,以保證引用最新的 css 和 js 資源 expires -1; } location /api/v1 { proxy_pass http://backend.com; } }
完整配置長這樣
worker_processes 1; events { worker_connections 1024; } http { ## # basic settings ## sendfile on; tcp_nopush on; tcp_nodelay on; keepalive_timeout 65; types_hash_max_size 2048; include /etc/nginx/mime.types; default_type application/octet-stream; ## # logging settings ## access_log /var/log/nginx/access.log; error_log /var/log/nginx/error.log; ## # gzip settings ## gzip on; gzip_disable "msie6"; gzip_comp_level 9; gzip_min_length 100; gzip_types text/css application/javascript; server { listen 8080; server_name www.frontend.com; root /usr/share/nginx/html/; location / { index index.html index.htm; try_files $uri $uri/ /index.html; expires -1; } location /api/v1 { proxy_pass http://backend.com; } } }
配置 docker
這里簡單一點,基于基礎(chǔ)鏡像,拷貝我們寫好的 nginx.conf 和 index.html 到鏡像內(nèi)
from nginx:alpine copy nginx.conf /etc/nginx/nginx.conf copy dist /usr/share/nginx/html
編寫 makefile
完成了上面的準備,就可以編寫命令來執(zhí)行鏡像的打包了
先給鏡像取個名稱和端口號
app_name = spa_nginx_docker port = 8080
通過 build 來打包鏡像
build: cp docker/dockerfile . cp docker/nginx.conf . docker build -t $(app_name) . rm dockerfile rm nginx.conf
通過 deploy 來啟動鏡像
deploy: docker run -d -it -p=$(port):$(port) --name="$(app_name)" $(app_name)
最后還有個 stop 來停止和清理鏡像
stop: docker stop $(app_name) docker rm $(app_name) docker rmi $(app_name)
完整配置長這樣
app_name = spa_nginx_docker port = 8080 build: cp docker/dockerfile . cp docker/nginx.conf . docker build -t $(app_name) . rm dockerfile rm nginx.conf deploy: docker run -d -it -p=$(port):$(port) --name="$(app_name)" $(app_name) stop: docker stop $(app_name) docker rm $(app_name) docker rmi $(app_name)
完整命令長這樣
# 靜態(tài)資源構(gòu)建 npm run build # 鏡像打包 make build # 停止并刪除舊鏡像(首次可忽略) make stop # 鏡像啟動 make deploy
關(guān)于“Docker+Nginx怎么部署單頁應(yīng)用”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識,可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會為大家更新不同的知識點。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。