一、Docker

• Docker 是一個(gè)容器化平臺(tái)，允許你將應(yīng)用程序及其依賴項(xiàng)打包在容器中。
• 使用 Docker，你可以創(chuàng)建一個(gè)包含 Vue.js 應(yīng)用程序的容器鏡像，并在任何支持 Docker 的環(huán)境中運(yùn)行該鏡像。

二、Nginx

• Nginx 是一個(gè)高性能的 HTTP 服務(wù)器和反向代理服務(wù)器，廣泛用于提供靜態(tài)文件和路由請(qǐng)求到后端服務(wù)。
• 在 Vue.js 應(yīng)用程序的部署中，Nginx 可以用于：
  • 作為靜態(tài)文件服務(wù)器，提供構(gòu)建后的 Vue.js 應(yīng)用程序文件。
  • 作為反向代理，將 API 請(qǐng)求轉(zhuǎn)發(fā)到后端服務(wù)器。

三、Docker Nginx配置到vue--項(xiàng)目中使用

1. VUE 項(xiàng)目創(chuàng)建文件Dockerfile-private

FROM nginx:1.19.3
COPY dist/ /usr/share/nginx/html
COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
COPY ./nginx/private/default.conf /etc/nginx/conf.d/default.conf

FROM nginx:1.19.3：指定基礎(chǔ)鏡像，這里使用的是 Nginx 的官方鏡像，標(biāo)簽為 1.19.3。

COPY dist/ /usr/share/nginx/html：將 Vue 項(xiàng)目構(gòu)建輸出的 dist 目錄中的所有文件復(fù)制到 Nginx 的默認(rèn)網(wǎng)頁(yè)根目錄 /usr/share/nginx/html。這意味著當(dāng)你訪問(wèn) Nginx 服務(wù)器時(shí)，這些靜態(tài)文件將被提供給客戶端。

COPY ./nginx/nginx.conf /etc/nginx/nginx.conf：復(fù)制自定義的 Nginx 主配置文件 nginx.conf 到容器中的 /etc/nginx/nginx.conf。這將覆蓋默認(rèn)的 Nginx 配置。

COPY ./nginx/private/default.conf /etc/nginx/conf.d/default.conf：復(fù)制自定義的 Nginx 配置文件 default.conf 到 Nginx 配置目錄 /etc/nginx/conf.d/。這個(gè)文件將被 Nginx 加載以配置網(wǎng)站的行為，例如設(shè)置代理、重定向等。

Nginx文件：

nginx.conf文件

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
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" "$request_body"'
                      '$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;
    include /etc/nginx/conf.d/*.conf;
}

nginx/private/default.conf

server {
    listen       8002;
    server_name  localhost;
    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;
    gzip_static on;
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 3;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";
    gzip_buffers 32 4k;
    fastcgi_intercept_errors on;
    server_tokens off;
    client_max_body_size 102400m;
    resolver 114.114.114.114 8.8.8.8 valid=120s;
    set $sentry router.anban.cloud;
    location / {
        add_header Cache-Control no-cache;
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri /index.html;
    }
    location /abfuzz {
        proxy_read_timeout 100s;
        proxy_pass http://127.0.0.1:18800;
    }
    location /files {
        rewrite ^/files(.*)$ $1 break;
        proxy_pass http://127.0.0.1:18800;
        proxy_http_version 1.1;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-Host $http_host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    error_page  403 404 408 500 501 502 503 504 507 /index.html;
}   

四、構(gòu)建鏡像并運(yùn)行：

構(gòu)建鏡像：

docker build --platform linux/amd64 -f Dockerfile-private -t myapp .

• docker build：Docker 構(gòu)建命令，用于根據(jù) Dockerfile 創(chuàng)建一個(gè)新的鏡像。
• --platform linux/amd64：指定構(gòu)建的目標(biāo)平臺(tái)為 Linux 架構(gòu)的 amd64（64位）。
• -f Dockerfile-private：指定使用 Dockerfile-private 作為構(gòu)建上下文的 Dockerfile。這表明你的構(gòu)建配置可能在 Dockerfile-private 文件中定義，而不是默認(rèn)的 Dockerfile。
• -t myapp：給構(gòu)建的鏡像指定一個(gè)標(biāo)簽（tag），這里標(biāo)簽是 myapp，這樣你就可以通過(guò)這個(gè)名稱來(lái)引用鏡像。
• .（點(diǎn)）：表示 Docker

 運(yùn)行鏡像：

docker run -d -p 3000:8002 --name vue-app-container myapp

• docker run：Docker 運(yùn)行命令，用于從鏡像創(chuàng)建并啟動(dòng)一個(gè)新的容器。
• -d：以分離模式運(yùn)行容器，在后臺(tái)運(yùn)行。
• -p 8002:8002：端口映射，將容器內(nèi)部的 8002 端口映射到宿主機(jī)的 8002 端口。
• --name vue-app-container：為容器指定一個(gè)名稱 vue-app-container，方便后續(xù)管理和引用。
• myapp：指定要運(yùn)行的鏡像的名稱或標(biāo)簽，這里使用了之前構(gòu)建的 myap鏡像

查看鏡像運(yùn)行：

docker ps

 運(yùn)行正常，直接訪問(wèn)地址： http://localhost:8002/

docker常用命令：

要中止正在運(yùn)行的容器并重新運(yùn)行它，你可以按照以下步驟操作：

找到容器 ID 或名稱： 首先，你需要找到容器的 ID 或名稱。你可以使用 docker ps 命令列出所有正在運(yùn)行的容器。

docker ps

停止容器： 使用 docker stop 命令加上容器的 ID 或名稱來(lái)停止容器。

docker stop <容器名稱或ID>

如果你為容器指定了名稱（在這個(gè)例子中是 vue-app-container），你可以直接使用名稱來(lái)停止它：

docker stop vue-app-container

啟動(dòng)容器： 在停止了容器之后，你可以使用 docker run 命令重新啟動(dòng)它，這次使用正確的端口映射。如果 Nginx 配置為監(jiān)聽(tīng) 8002 端口，你需要確保 Docker 容器的端口映射也相應(yīng)地設(shè)置為 8002。

docker run -d -p 8002:8002 --name my-nginx-container my-nginx-image

這個(gè)命令將容器內(nèi)部的 8002 端口映射到宿主機(jī)的 8002 端口，并以分離模式啟動(dòng)容器。

驗(yàn)證容器狀態(tài)：  docker ps 來(lái)檢查容器是否成功啟動(dòng)。

五、基礎(chǔ)配置demo（Dockerfile和nginx/default.conf）

剛才第三點(diǎn)，是我項(xiàng)目中使用的配置，下面是一個(gè)很基礎(chǔ)的配置，可以直粘貼代碼使用

dockerfile文件

FROM nginx:1.19.3
COPY dist/ /usr/share/nginx/html
COPY ./nginx/default.conf /etc/nginx/default.conf
 

nignx/default.conf

server {
    listen       80;
    server_name  localhost;
    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;
    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;
    }
    location /abfuzz {
        proxy_read_timeout 100s;
        proxy_pass http://127.0.0.1:18800;
    }
}

構(gòu)建鏡像：

docker build --platform linux/amd64 -f Dockerfile -t test1 .

運(yùn)行鏡像：

 docker run -d -p 3000:80 --name test1-container test1

查看鏡像狀態(tài)：

docker ps 

 訪問(wèn)地址：http://localhost:3000/  

到此這篇關(guān)于VUE 項(xiàng)目用 Docker+Nginx進(jìn)行打包部署的文章就介紹到這了,更多相關(guān)docker nginx打包部署vue項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論