使用Docker+Nginx部署vue項(xiàng)目詳細(xì)圖文教程
前言
最近(之前)雙十一了,博主趁著各大服務(wù)器廠商搞活動入手了一臺騰訊云服務(wù)器。想用本服務(wù)器部署一些簡單的web應(yīng)用
本篇博客記錄一下在配置過程中遇到的問題及問題觸發(fā)的原因。
一、前言
大致流程是在docker內(nèi)運(yùn)行nginx環(huán)境,然后通過數(shù)據(jù)持久化,將打包好的vue應(yīng)用部署在docker內(nèi)的nginx內(nèi)這里就需要我們有Docker、Nginx、Vue前置知識了,如果對這三樣都很陌生的話最好先去熟悉一下,否則會很難受。
需要具備的能力:懂Docker簡單的命令,容器監(jiān)控(docker cp …),容器數(shù)據(jù)持久化(docker inspect …)等,會使用docker 排錯懂Vue項(xiàng)目的配置、打包、運(yùn)行。(至少要把Vue項(xiàng)目跑起來)懂Nginx配置文件,及一些常用目錄是干什么的。
二、vue項(xiàng)目打包
在相應(yīng)的路徑執(zhí)行:(這是在vue腳手架中打包的,打包方式不固定,找適合自己的)
npm run build
至此Vue項(xiàng)目打包暫時告一段落,我們開始進(jìn)行nginx的配置
三、nginx基本介紹
Nginx是lgor Sysoev為俄羅斯訪問量第二的rambler.ru站點(diǎn)設(shè)計(jì)開發(fā)的。從2004年發(fā)布至今,憑借開源的力量,已經(jīng)接近成熟與完善。
Nginx功能豐富,可作為HTTP服務(wù)器,也可作為反向代理服務(wù)器,郵件服務(wù)器。支持FastCGI、SSL、Virtual Host、URL Rewrite、Gzip等功能。并且支持很多第三方的模塊擴(kuò)展。
Nginx的穩(wěn)定性、功能集、示例配置文件和低系統(tǒng)資源的消耗讓他后來居上,在全球活躍的網(wǎng)站中有12.18%的使用比率,大約為2220萬個網(wǎng)站。
①nginx常用的功能:
負(fù)載均衡
- Nginx在做反向代理時,提供性能穩(wěn)定,并且能夠提供配置靈活的轉(zhuǎn)發(fā)功能。Nginx可以根據(jù)不同的正則匹配,采取不同的轉(zhuǎn)發(fā)策略,比如圖片文件結(jié)尾的走文件服務(wù)器,動態(tài)頁面走web服務(wù)器,只要你正則寫的沒問題,又有相對應(yīng)的服務(wù)器解決方案,你就可以隨心所欲的玩。并且Nginx對返回結(jié)果進(jìn)行錯誤頁跳轉(zhuǎn),異常判斷等。如果被分發(fā)的服務(wù)器存在異常,他可以將請求重新轉(zhuǎn)發(fā)給另外一臺服務(wù)器,然后自動去除異常服務(wù)器。
正、反向代理
- Nginx提供的負(fù)載均衡策略有2種:內(nèi)置策略和擴(kuò)展策略。內(nèi)置策略為輪詢,加權(quán)輪詢,Ip hash。擴(kuò)展策略,就天馬行空,只有你想不到的沒有他做不到的啦,你可以參照所有的負(fù)載均衡算法,給他一一找出來做下實(shí)現(xiàn)。
web緩存
- Nginx可以對不同的文件做不同的緩存處理,配置靈活,并且支持FastCGI_Cache,主要用于對FastCGI的動態(tài)程序進(jìn)行緩存。配合著第三方的ngx_cache_purge,對制定的URL緩存內(nèi)容可以的進(jìn)行增刪管理。 ②nginx默認(rèn)的主題配置文件解讀
配置文件大致結(jié)構(gòu):
1、全局塊:配置影響nginx全局的指令。一般有運(yùn)行nginx服務(wù)器的用戶組,nginx進(jìn)程pid存放路徑,日志存放路徑,配置文件引入,允許生成worker process數(shù)等。
2、events塊:配置影響nginx服務(wù)器或與用戶的網(wǎng)絡(luò)連接。有每個進(jìn)程的最大連接數(shù),選取哪種事件驅(qū)動模型處理連接請求,是否允許同時接受多個網(wǎng)路連接,開啟多個網(wǎng)絡(luò)連接序列化等。
3、http塊:可以嵌套多個server,配置代理,緩存,日志定義等絕大多數(shù)功能和第三方模塊的配置。如文件引入,mime-type定義,日志自定義,是否使用sendfile傳輸文件,連接超時時間,單連接請求數(shù)等。
4、server塊:配置虛擬主機(jī)的相關(guān)參數(shù),一個http中可以有多個server。
5、location塊:配置請求的路由,以及各種頁面的處理情況。
... #全局塊 events { #events塊 ... } http #http塊 { ... #http全局塊 server #server塊 { ... #server全局塊 location [PATTERN] #location塊 { ... } location [PATTERN] { ... } } server { ... } ... #http全局塊 }
配置文件的每一行都要以;結(jié)尾
配置文件內(nèi)談到的驚群現(xiàn)象指一個網(wǎng)路連接到來,多個睡眠的進(jìn)程被同時叫醒,但只有一個進(jìn)程能獲得鏈接,這樣會影響系統(tǒng)性能。
#配置用戶或者組,默認(rèn)為nobody nobody。 #user nobody; #啟動進(jìn)程,通常設(shè)置成和cpu的數(shù)量相等或者2倍于cpu的個數(shù)(具體結(jié)合cpu和內(nèi)存)。默認(rèn)為1 (通俗來說允許生成的進(jìn)程數(shù)) worker_processes 1; #全局的錯誤日志存放路徑和日志級別[ debug | info | notice | warn | error | crit ] #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid進(jìn)程文件 指定nginx進(jìn)程運(yùn)行文件存放地址 #pid logs/nginx.pid; #工作模式以及連接數(shù)上限 events { #accept_mutex on; #設(shè)置網(wǎng)路連接序列化,防止驚群現(xiàn)象發(fā)生,默認(rèn)為on #multi_accept on; #設(shè)置一個進(jìn)程是否同時接受多個網(wǎng)絡(luò)連接,默認(rèn)為off #use epoll; #事件驅(qū)動模型,select|poll|kqueue|epoll|resig|/dev/poll|eventport worker_connections 1024;#最大連接數(shù),默認(rèn)為512 } http { #設(shè)定mime類型,類型由mime.type文件定義。文件擴(kuò)展名與文件類型映射表 include mime.types; #默認(rèn)文件類型 默認(rèn)為text/plain default_type application/octet-stream; #設(shè)定日志格式 #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; #access日志文件的路徑,采用上面定義的main 格式記錄 #access_log logs/access.log main; #開啟高效文件傳輸模式,sendfile指令指定nginx是否調(diào)用sendfile函數(shù)來輸出文件, #對于普通應(yīng)用設(shè)為 on,如果用來進(jìn)行下載等應(yīng)用磁盤IO重負(fù)載應(yīng)用,可設(shè)置為off, #以平衡磁盤與網(wǎng)絡(luò)I/O處理速度,降低系統(tǒng)的負(fù)載。注意:如果圖片顯示不正常把這個改成off。默認(rèn)開啟狀態(tài) sendfile on; #防止網(wǎng)絡(luò)阻塞 #tcp_nopush on; #長連接超時時間,單位是秒 #keepalive_timeout 0; keepalive_timeout 65; #開啟gzip壓縮輸出 #gzip on; #虛擬主機(jī)的配置 server { #監(jiān)聽窗口 listen 80; #定義使用localhost,也可以自動定義域名訪問 #域名可以有多個用空格隔開 server_name localhost; #字符編碼 #charset koi8-r; #日志位置 #access_log logs/host.access.log main; #默認(rèn)請求 location / { #定義服務(wù)器的默認(rèn)網(wǎng)站根目錄位置 root html; #定義首頁索引文件的名稱 定義多個用空格隔開 index index.html index.htm; } #定義404錯誤提示頁面 #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # 定義 50x錯誤提示頁面 error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # 將PHP腳本代理到在127.0.0.1:80上監(jiān)聽的Apache #location ~ \.php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # 將PHP腳本傳遞給在127.0.0.1:9000上監(jiān)聽的FastCGI服務(wù)器 #location ~ \.php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # 如果Apache的文檔根與nginx的一致,禁止訪問.htaccess文件 #location ~ /\.ht { # deny all; #} } # another virtual host using mix of IP-, name-, and port-based configuration # 另一個虛擬主機(jī)使用混合 ip name port 的配置 #server { # listen 8000; # listen somename:8080; # server_name somename alias another.alias; # location / { # root html; # index index.html index.htm; # } #} #HTTPS server 的配置,默認(rèn)不開啟 # HTTPS server # #server { # 監(jiān)聽443端口 # listen 443 ssl; #定義使用localhost,也可以自動定義域名訪問 #域名可以有多個用空格隔開 # server_name localhost; # ssl證書的pem文件 # ssl_certificate cert.pem; # ssl證書的key文件 # ssl_certificate_key cert.key; # 設(shè)置存儲session參數(shù)的緩存的類型和大小 # off:嚴(yán)格禁止使用會話緩存:nginx明確告知客戶端會話不可重用。 # none:會話緩存是不允許的:nginx告知客戶端會話可以重用,但并沒有在緩存中存儲會話參數(shù)。 # builtin:在OpenSSL中構(gòu)建緩存;只能被一個工作進(jìn)程使用。緩存的大小在會話中指定,如果沒有指定大小,默認(rèn)20480個會話。使用內(nèi)置緩存會導(dǎo)致內(nèi)存碎片化。 # shared:緩存在所有工作進(jìn)程之間共享。緩存大小按照字節(jié)為單位指定;1MB可以存儲4000個會話。每塊共享內(nèi)存都應(yīng)該起個名字。同一塊緩存可以在多個虛擬服務(wù)中使用。 # ssl_session_cache shared:SSL:1m; # 指定客戶端可以重用會話參數(shù)的時間 # ssl_session_timeout 5m; # 密碼套件 # ssl_ciphers HIGH:!aNULL:!MD5; # 設(shè)置協(xié)商加密算法時,優(yōu)先使用我們服務(wù)端的加密套件,而不是客戶端瀏覽器的加密套件。 # ssl_prefer_server_ciphers on; # location / { # root html; # index index.html index.htm; # } #} }
③nginx目錄解讀
路徑 | 類型 | 作用 |
---|---|---|
/etc/logrotate.d/nginx | 配置文件 | Nginx日志輪轉(zhuǎn),用于logrotate服務(wù)的日志切割,如將日志切割為按天分 |
/etc/nginx /etc/nginx/nginx.conf /etc/nginx/conf.d /etc/nginx/conf.d/default.conf | 目錄、配置文件 | Nginx主配置文件 |
/etc/nginx/fastcgi_params /etc/nginx/uwsgi_params /etc/nginx/scgi_params | 配置文件 | cgi配置相關(guān),fastcgi配置 |
/etc/nginx/koi-utf /etc/nginx/koi-win /etc/nginx/win-utf | 配置文件 | 編碼轉(zhuǎn)換映射轉(zhuǎn)換文件 |
/etc/nginx/mime.types | 配置文件 | 設(shè)置http協(xié)議的Content-Type與擴(kuò)展名對應(yīng)關(guān)系,如自定義的一些擴(kuò)展名不會被識別時,就需要手動配置,使nginx能夠識別 |
/etc/sysconfig/nginx /etc/sysconfig/nginx-debug /usr/lib/systemd/system/nginx-debug.service /usr/lib/systemd/system/nginx.service | 配置文件 | 用于配置出系統(tǒng)守護(hù)進(jìn)程管理器管理方式 |
/etc/nginx/modules /usr/lib64/nginx/modules | 目錄 | Nginx模塊目錄 |
/usr/sbin/nginx /usr/sbin/nginx-debug | 命令 | Nginx服務(wù)的啟動管理的終端命令 |
/usr/share/doc/nginx-1.16.1 /usr/share/doc/nginx-1.16.1/COPYRIGHT /usr/share/man/man8/nginx.8.gz | 文件、目錄 | Nginx的手冊和幫助文件 |
/var/cache/nginx | 目錄 | Nginx的緩存目錄 |
/var/log/nginx | 目錄 | Nginx的日志目錄 |
目錄樹:
root@ubuntu:~# tree /usr/local/nginx/
/usr/local/nginx/
├── client_body_temp
├── conf #存放一系列配置文件的目錄
│ ├── fastcgi.conf #fastcgi程序相關(guān)配置文件
│ ├── fastcgi.conf.default #fastcgi程序相關(guān)配置文件備份
│ ├── fastcgi_params #fastcgi程序參數(shù)文件
│ ├── fastcgi_params.default #fastcgi程序參數(shù)文件備份
│ ├── koi-utf #編碼映射文件
│ ├── koi-win #編碼映射文件
│ ├── mime.types #媒體類型控制文件
│ ├── mime.types.default #媒體類型控制文件備份
│ ├── nginx.conf #主配置文件
│ ├── nginx.conf.default #主配置文件備份
│ ├── scgi_params #scgi程序相關(guān)配置文件
│ ├── scgi_params.default #scgi程序相關(guān)配置文件備份
│ ├── uwsgi_params #uwsgi程序相關(guān)配置文件
│ ├── uwsgi_params.default #uwsgi程序相關(guān)配置文件備份
│ └── win-utf #編碼映射文件
├── fastcgi_temp #存放fastcgi程序臨時文件
├── html #存放網(wǎng)頁文檔
│ ├── 50x.html #錯誤頁碼顯示網(wǎng)頁文件
│ └── index.html #網(wǎng)頁的首頁文件
├── logs #存放nginx的日志文件
│ ├── access.log #默認(rèn)訪問日志
│ ├── error.log #錯誤日志
│ └── nginx.pid #nginx pid文件
├── proxy_temp #代理相關(guān)臨時文件
├── sbin #存放啟動程序
│ └── nginx #nginx啟動程序
├── scgi_temp #存放scgi程序臨時文件
└── uwsgi_temp #存放uwsgi程序臨時文件9 directories, 21 files
三、docker內(nèi)部署nginx
①拉取nginx鏡像
docker pull nginx
②創(chuàng)建數(shù)據(jù)持久化目錄☆☆☆
未來要部署的項(xiàng)目打包好久放在html目錄
mkdir /root/zscDemo/vueDemo/aiecp/{conf,html,log,logs}
③創(chuàng)建需要映射進(jìn)去的文件
vim /root/zscDemo/vueDemo/aiecp/conf/nginx.conf
將上面主題配置文件粘進(jìn)去
④運(yùn)行nginx
docker run --name aiecp -d -p 80:80 --restart=always --privileged=true -v /root/zscDemo/vueDemo/aiecp/conf/nginx.conf:/etc/nginx/nginx.conf -v /root/zscDemo/vueDemo/aiecp/html:/etc/nginx/html -v /root/zscDemo/vueDemo/aiecp/log:/var/log/nginx nginx
看到這個界面,證明環(huán)境正常
四、大工告成
將二中生成的dist文件夾內(nèi)的所有文件,拷貝進(jìn)與nginx的html相映射的文件夾,然后重啟docker內(nèi)的nginx
docker restart nginx(這里是你運(yùn)行容器對應(yīng)的名稱或者ID)
當(dāng)看到服務(wù)可以跑起來的時候,就可以ctrl+f5對瀏覽器進(jìn)行強(qiáng)制刷新了。
總結(jié)
到此這篇關(guān)于使用Docker+Nginx部署vue項(xiàng)目的文章就介紹到這了,更多相關(guān)Docker+Nginx部署vue內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue打包并部署到nginx上的實(shí)現(xiàn)示例
- 項(xiàng)目nginx部署到非根目錄下vue配置方案
- nginx代理部署Vue刷新頁面404的問題解決
- nginx部署vue頁面白屏或刷新404問題解決
- nginx配置同一域名同一端口下部署多個vue項(xiàng)目的實(shí)現(xiàn)
- Nginx同一端口部署多個前后端分離的vue項(xiàng)目完整步驟
- 在vue中實(shí)現(xiàn)跨域方法小結(jié)
- Nginx部署多個vue項(xiàng)目的方法步驟
- vue打包后的線上部署Apache、nginx全過程
- 使用Nginx部署前端Vue項(xiàng)目的實(shí)現(xiàn)
相關(guān)文章
docker search 搜索鏡像的實(shí)現(xiàn)示例
本文主要介紹了docker search搜索鏡像的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-02-02Docker教程之Ubuntu 安裝 Docker詳細(xì)介紹
這篇文章主要介紹了Docker教程之Ubuntu 安裝 Docker詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-12-12遠(yuǎn)程docker服務(wù)器攜帶證書連接的實(shí)現(xiàn)方法
本文主要介紹了遠(yuǎn)程docker服務(wù)器攜帶證書連接的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-11-11Docker安裝Oracle創(chuàng)建表空間并導(dǎo)入數(shù)據(jù)庫完整步驟
Docker提供了一種簡便的方式,通過容器化我們可以在任何支持Docker 的環(huán)境中快速部署Oracle數(shù)據(jù)庫,這篇文章主要介紹了Docker安裝Oracle創(chuàng)建表空間并導(dǎo)入數(shù)據(jù)庫的相關(guān)資料,需要的朋友可以參考下2025-04-04Docker部署Node.js的實(shí)現(xiàn)示例
本文介紹了在服務(wù)器上使用Docker部署Node.js項(xiàng)目,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-12-12