使用Docker+Nginx部署vue項目詳細圖文教程
前言
最近(之前)雙十一了,博主趁著各大服務器廠商搞活動入手了一臺騰訊云服務器。想用本服務器部署一些簡單的web應用
本篇博客記錄一下在配置過程中遇到的問題及問題觸發(fā)的原因。
一、前言
大致流程是在docker內(nèi)運行nginx環(huán)境,然后通過數(shù)據(jù)持久化,將打包好的vue應用部署在docker內(nèi)的nginx內(nèi)這里就需要我們有Docker、Nginx、Vue前置知識了,如果對這三樣都很陌生的話最好先去熟悉一下,否則會很難受。
需要具備的能力:懂Docker簡單的命令,容器監(jiān)控(docker cp …),容器數(shù)據(jù)持久化(docker inspect …)等,會使用docker 排錯懂Vue項目的配置、打包、運行。(至少要把Vue項目跑起來)懂Nginx配置文件,及一些常用目錄是干什么的。
二、vue項目打包
在相應的路徑執(zhí)行:(這是在vue腳手架中打包的,打包方式不固定,找適合自己的)
npm run build



至此Vue項目打包暫時告一段落,我們開始進行nginx的配置
三、nginx基本介紹
Nginx是lgor Sysoev為俄羅斯訪問量第二的rambler.ru站點設計開發(fā)的。從2004年發(fā)布至今,憑借開源的力量,已經(jīng)接近成熟與完善。
Nginx功能豐富,可作為HTTP服務器,也可作為反向代理服務器,郵件服務器。支持FastCGI、SSL、Virtual Host、URL Rewrite、Gzip等功能。并且支持很多第三方的模塊擴展。
Nginx的穩(wěn)定性、功能集、示例配置文件和低系統(tǒng)資源的消耗讓他后來居上,在全球活躍的網(wǎng)站中有12.18%的使用比率,大約為2220萬個網(wǎng)站。
①nginx常用的功能:
負載均衡
- Nginx在做反向代理時,提供性能穩(wěn)定,并且能夠提供配置靈活的轉(zhuǎn)發(fā)功能。Nginx可以根據(jù)不同的正則匹配,采取不同的轉(zhuǎn)發(fā)策略,比如圖片文件結(jié)尾的走文件服務器,動態(tài)頁面走web服務器,只要你正則寫的沒問題,又有相對應的服務器解決方案,你就可以隨心所欲的玩。并且Nginx對返回結(jié)果進行錯誤頁跳轉(zhuǎn),異常判斷等。如果被分發(fā)的服務器存在異常,他可以將請求重新轉(zhuǎn)發(fā)給另外一臺服務器,然后自動去除異常服務器。
正、反向代理
- Nginx提供的負載均衡策略有2種:內(nèi)置策略和擴展策略。內(nèi)置策略為輪詢,加權輪詢,Ip hash。擴展策略,就天馬行空,只有你想不到的沒有他做不到的啦,你可以參照所有的負載均衡算法,給他一一找出來做下實現(xiàn)。
web緩存
- Nginx可以對不同的文件做不同的緩存處理,配置靈活,并且支持FastCGI_Cache,主要用于對FastCGI的動態(tài)程序進行緩存。配合著第三方的ngx_cache_purge,對制定的URL緩存內(nèi)容可以的進行增刪管理。 ②nginx默認的主題配置文件解讀
配置文件大致結(jié)構:
1、全局塊:配置影響nginx全局的指令。一般有運行nginx服務器的用戶組,nginx進程pid存放路徑,日志存放路徑,配置文件引入,允許生成worker process數(shù)等。
2、events塊:配置影響nginx服務器或與用戶的網(wǎng)絡連接。有每個進程的最大連接數(shù),選取哪種事件驅(qū)動模型處理連接請求,是否允許同時接受多個網(wǎng)路連接,開啟多個網(wǎng)絡連接序列化等。
3、http塊:可以嵌套多個server,配置代理,緩存,日志定義等絕大多數(shù)功能和第三方模塊的配置。如文件引入,mime-type定義,日志自定義,是否使用sendfile傳輸文件,連接超時時間,單連接請求數(shù)等。
4、server塊:配置虛擬主機的相關參數(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)路連接到來,多個睡眠的進程被同時叫醒,但只有一個進程能獲得鏈接,這樣會影響系統(tǒng)性能。
#配置用戶或者組,默認為nobody nobody。
#user nobody;
#啟動進程,通常設置成和cpu的數(shù)量相等或者2倍于cpu的個數(shù)(具體結(jié)合cpu和內(nèi)存)。默認為1 (通俗來說允許生成的進程數(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進程文件 指定nginx進程運行文件存放地址
#pid logs/nginx.pid;
#工作模式以及連接數(shù)上限
events {
#accept_mutex on; #設置網(wǎng)路連接序列化,防止驚群現(xiàn)象發(fā)生,默認為on
#multi_accept on; #設置一個進程是否同時接受多個網(wǎng)絡連接,默認為off
#use epoll; #事件驅(qū)動模型,select|poll|kqueue|epoll|resig|/dev/poll|eventport
worker_connections 1024;#最大連接數(shù),默認為512
}
http {
#設定mime類型,類型由mime.type文件定義。文件擴展名與文件類型映射表
include mime.types;
#默認文件類型 默認為text/plain
default_type application/octet-stream;
#設定日志格式
#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ù)來輸出文件,
#對于普通應用設為 on,如果用來進行下載等應用磁盤IO重負載應用,可設置為off,
#以平衡磁盤與網(wǎng)絡I/O處理速度,降低系統(tǒng)的負載。注意:如果圖片顯示不正常把這個改成off。默認開啟狀態(tài)
sendfile on;
#防止網(wǎng)絡阻塞
#tcp_nopush on;
#長連接超時時間,單位是秒
#keepalive_timeout 0;
keepalive_timeout 65;
#開啟gzip壓縮輸出
#gzip on;
#虛擬主機的配置
server {
#監(jiān)聽窗口
listen 80;
#定義使用localhost,也可以自動定義域名訪問
#域名可以有多個用空格隔開
server_name localhost;
#字符編碼
#charset koi8-r;
#日志位置
#access_log logs/host.access.log main;
#默認請求
location / {
#定義服務器的默認網(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服務器
#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
# 另一個虛擬主機使用混合 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 的配置,默認不開啟
# 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;
# 設置存儲session參數(shù)的緩存的類型和大小
# off:嚴格禁止使用會話緩存:nginx明確告知客戶端會話不可重用。
# none:會話緩存是不允許的:nginx告知客戶端會話可以重用,但并沒有在緩存中存儲會話參數(shù)。
# builtin:在OpenSSL中構建緩存;只能被一個工作進程使用。緩存的大小在會話中指定,如果沒有指定大小,默認20480個會話。使用內(nèi)置緩存會導致內(nèi)存碎片化。
# shared:緩存在所有工作進程之間共享。緩存大小按照字節(jié)為單位指定;1MB可以存儲4000個會話。每塊共享內(nèi)存都應該起個名字。同一塊緩存可以在多個虛擬服務中使用。
# ssl_session_cache shared:SSL:1m;
# 指定客戶端可以重用會話參數(shù)的時間
# ssl_session_timeout 5m;
# 密碼套件
# ssl_ciphers HIGH:!aNULL:!MD5;
# 設置協(xié)商加密算法時,優(yōu)先使用我們服務端的加密套件,而不是客戶端瀏覽器的加密套件。
# ssl_prefer_server_ciphers on;
# location / {
# root html;
# index index.html index.htm;
# }
#}
}③nginx目錄解讀
| 路徑 | 類型 | 作用 |
|---|---|---|
| /etc/logrotate.d/nginx | 配置文件 | Nginx日志輪轉(zhuǎn),用于logrotate服務的日志切割,如將日志切割為按天分 |
| /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配置相關,fastcgi配置 |
| /etc/nginx/koi-utf /etc/nginx/koi-win /etc/nginx/win-utf | 配置文件 | 編碼轉(zhuǎn)換映射轉(zhuǎn)換文件 |
| /etc/nginx/mime.types | 配置文件 | 設置http協(xié)議的Content-Type與擴展名對應關系,如自定義的一些擴展名不會被識別時,就需要手動配置,使nginx能夠識別 |
| /etc/sysconfig/nginx /etc/sysconfig/nginx-debug /usr/lib/systemd/system/nginx-debug.service /usr/lib/systemd/system/nginx.service | 配置文件 | 用于配置出系統(tǒng)守護進程管理器管理方式 |
| /etc/nginx/modules /usr/lib64/nginx/modules | 目錄 | Nginx模塊目錄 |
| /usr/sbin/nginx /usr/sbin/nginx-debug | 命令 | Nginx服務的啟動管理的終端命令 |
| /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程序相關配置文件
│ ├── fastcgi.conf.default #fastcgi程序相關配置文件備份
│ ├── 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程序相關配置文件
│ ├── scgi_params.default #scgi程序相關配置文件備份
│ ├── uwsgi_params #uwsgi程序相關配置文件
│ ├── uwsgi_params.default #uwsgi程序相關配置文件備份
│ └── win-utf #編碼映射文件
├── fastcgi_temp #存放fastcgi程序臨時文件
├── html #存放網(wǎng)頁文檔
│ ├── 50x.html #錯誤頁碼顯示網(wǎng)頁文件
│ └── index.html #網(wǎng)頁的首頁文件
├── logs #存放nginx的日志文件
│ ├── access.log #默認訪問日志
│ ├── error.log #錯誤日志
│ └── nginx.pid #nginx pid文件
├── proxy_temp #代理相關臨時文件
├── 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ù)持久化目錄☆☆☆
未來要部署的項目打包好久放在html目錄
mkdir /root/zscDemo/vueDemo/aiecp/{conf,html,log,logs}

③創(chuàng)建需要映射進去的文件
vim /root/zscDemo/vueDemo/aiecp/conf/nginx.conf
將上面主題配置文件粘進去

④運行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)的所有文件,拷貝進與nginx的html相映射的文件夾,然后重啟docker內(nèi)的nginx
docker restart nginx(這里是你運行容器對應的名稱或者ID)

當看到服務可以跑起來的時候,就可以ctrl+f5對瀏覽器進行強制刷新了。

總結(jié)
到此這篇關于使用Docker+Nginx部署vue項目的文章就介紹到這了,更多相關Docker+Nginx部署vue內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Docker安裝Oracle創(chuàng)建表空間并導入數(shù)據(jù)庫完整步驟
Docker提供了一種簡便的方式,通過容器化我們可以在任何支持Docker 的環(huán)境中快速部署Oracle數(shù)據(jù)庫,這篇文章主要介紹了Docker安裝Oracle創(chuàng)建表空間并導入數(shù)據(jù)庫的相關資料,需要的朋友可以參考下2025-04-04

