Docker 安裝 Nginx 部署前端專案

語言: CN / TW / HK

攜手創作,共同成長!這是我參與「掘金日新計劃 · 8 月更文挑戰」的第3天,點選檢視活動詳情

本文算是我編寫 Docker + Jenkins 自動化部署專欄的開篇文吧

雖然看起來和Jenkins沒啥關係~,但是後續還是會用到Nginx部署前端專案的。

很久沒有嘗試連續寫一整個系列了,希望此專欄能幫助到一些小夥伴們 😃

一、關於 Nginx 伺服器

其實說到web伺服器,著名的有 Apache 、Apache下的頂級專案 Tomcat、微軟的 IIS、以及我們今天學的的Nginx。

不同伺服器的側重點是不同的,像Tomcat就是一個開放原始碼、執行servlet和JSP Web應用軟體的基於Java的Web應用軟體容器。而Nginx是一款輕量級的Web 伺服器/反向代理反向代理伺服器及電子郵件(IMAP/POP3)代理伺服器,在BSD-like 協議下發行。其特點是佔有記憶體少,併發能力強,事實上nginx的併發能力在同類型的網頁伺服器中表現較好。

他的介紹也代表了他的應用性廣,總結起來,Nginx 的應用場景或者能夠實現的功能大致如以下幾點:

  1. 正向代理
  2. 反向代理
  3. 負載均衡
  4. 動靜分離
  5. 靜態資源web伺服器

而我們今天主要利用到的就是 第五點將 Nginx 作為一個靜態資源 Web伺服器。

二、Docker 安裝 Nginx

搜尋映象命令,會列出所有的可下載的映象

docker search nginx

image-20220721203433290.png

拉取映象

docker pull nginx # 不加版本號 預設拉取最新版  docker pull nginx:[tag] # : 號 後面就可以加版本號 如 nginx:1.16.1 這種,但需要確定它是存在過的版本號才可以。

學習的話,一般直接上手最新,不行了再降。

image-20220721203817272.png


注意:這裡有一個需要注意的點,Nginx 一般是根據配置檔案啟動的。

如果我們在第一次啟動的時候就掛載目錄,那麼因為我們宿主機是空檔案,會直接導致 Nginx 容器內的配置檔案被覆蓋,致使啟動失敗。

所以的步驟如下:

1、宿主機建立好要掛載的目錄

mkdir -p /home/nginx/  mkdir -p /home/nginx/logs    mkdir -p /home/nginx/html

-p 引數的作用就是允許建立多級目錄

2、啟動一個不掛載的容器

docker run -d --name nzc-nginx  -p 80:80 nginx

image-20220721205223050.png

為了讓大家更進一步理解 Nginx 目錄結構,我們用命令進入 Nginx 容器

docker exec -it nzc-nginx bash

-it 以互動式進入容器 ,bash保留為容器終端的輸入形式,所以結合起來就是進入容器終端並且的保留為容器終端的輸入形式(-it和bash的結合作用)

image-20220721210045411.png

/etc/nginx/nginx.conf是nginx的主配置檔案,具體內容留在後一章節再說吧。

/etc/nginx/conf.d下的default.conf 就是預設 server 配置

3、從容器中把配置檔案複製出來

退出容器的終端,直接在終端裡輸入 exit 即可。

docker cp nzc-nginx:/etc/nginx/nginx.conf /home/nginx/nginx.conf  docker cp nzc-nginx:/etc/nginx/conf.d /home/nginx/  docker cp nzc-nginx:/usr/share/nginx/html /home/nginx/ #此處就是網站站點目錄

image-20220721211251296.png

4、暫停、刪除容器

檢視所有正在執行的容器

docker ps  docker ps -a #檢視所有容器

image-20220721211348733.png

暫停、刪除容器

docker stop nzc-nginx # nzc-nginx 容器| 容器ID 也可以,只需要前3位數字即可  docker rm nzc-nginx  docker rm -f nzc-nginx #直接刪除正在執行的容器

image-20220721212521238.png

5、重新啟動一個掛載目錄的容器

docker run \  -p 80:80 \  --name nzc-nginx \  -v /home/nginx/nginx.conf:/etc/nginx/nginx.conf \  -v /home/nginx/conf.d:/etc/nginx/conf.d \  -v /home/nginx/logs:/var/log/nginx \  -v /home/nginx/html:/usr/share/nginx/html \  -d nginx:latest

image-20220721212550737.png

測試:可以成功訪問就是成功啟動啦。

image-20220721212606636.png

如果需要每次都自啟動的話,可以加上 ``

三、Nginx 配置檔案講解

本小章節只是針對與專案有關聯配置檔案進行一番簡單的講解,更詳細的可能就需要大家去找找其他創作者所寫的文章啦。望大家見諒

我們先看看之前上文提了一嘴的主配置檔案:

nginx.conf

user nginx;  worker_processes auto;  # error_log 輸出目錄  error_log /var/log/nginx/error.log notice;  pid       /var/run/nginx.pid;  ​  events {    # 單個工作程序可以允許同時建立外部連線的數量     worker_connections  1024;  }  http {     include       /etc/nginx/mime.types;     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_log /var/log/nginx/access.log main;     sendfile       on;      #tcp_nopush     on;     keepalive_timeout  65;  #連線存活時間  ​      #gzip on; 支援傳遞壓縮檔案   # nginx 配置檔案中支援 include ,即支援多配置檔案組合     include /etc/nginx/conf.d/*.conf;  }

你可別小瞧這個檔案,裡面有不少設定的開關勒,不過這次不是寫這裡~~

繼續來到 default.conf

server {   # 這裡就是表示監聽的埠     listen       80;     listen [::]:80;      # 這裡表示服務地址 寫域名或者ip     server_name localhost;      #access_log /var/log/nginx/host.access.log main;            # 這裡就是我們今天要接觸的東西了      # / 表示的是 ip:port後面跟著的路徑 / 就是 ip:port/      # 如果是 /nzc 訪問的時候就是 ip:port/nzc/      #基於這個邏輯,我們就可以執行多個站點      # 這裡還可以寫表示式、正則表示式等     location / {         root   /usr/share/nginx/html;         index index.html index.htm;     }      #error_page 404             /404.html;  ​      # redirect server error pages to the static page /50x.html      #錯誤頁面轉發     error_page   500 502 503 504 /50x.html;     location = /50x.html {         root   /usr/share/nginx/html;     }  ​      # 反向代理的例子      # proxy the PHP scripts to Apache listening on 127.0.0.1:80      #      #location ~ .php$ {      #   proxy_pass   http://127.0.0.1;      #}  ​      # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000      #      #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      #      # 黑名單白名單功能      #location ~ /.ht {      #   deny all;      #}  }

我們在 default.conf 中加上一個 location ,等會部署我們的專案

server {     location /nzc {         # alias 後面跟著的是容器內部的目錄,但是我們是掛載出來的,實際上我們放在宿主機相應的掛載目錄下即可         alias   /usr/share/nginx/html/www/blog/dist;         # 這裡的crush是我專案字首         index index.html index.htm;         try_files $uri $uri/ /nzc/index.html;       }  }

關於這裡的牽扯到的 alias

也可以看看 alias 與 root 區別

四、部署前端專案

對了修改完 nginx配置檔案,記得重啟一下,不然不生效。

docker restart nzc-nginx

我這裡前端是 Vue 專案,打包相信大家都會打包吧~

沒有vue專案,其實扔個 html 頁面上去測試也可以的,莫慌。

可能會出現的錯誤

打包的時候可能會出現靜態資源訪問不到的錯誤。

把 vue.config.js檔案中的 publicPath 改成 ./

image-20220721222053617.png

大家記得建立一下目錄,別忘啦。 image-20220721225717565.png

其實上傳到指定目錄後,就可以直接訪問啦,不然看我。

測試:

image-20220721230000749.png

或者直接 curl 測試也可

image-20220721230058278.png 今天第一天結束啦~~

五、總結

相信大家對於 Docker 怎麼玩、Nginx 是什麼樣子大致應該是有所瞭解了吧,希望大家有所收穫,我們一起加油!

Nginx 可以做的事情有很多,很好玩的,感興趣的可以多試試,也可以試著自己記錄記錄!!

明天繼續~~