vue前端項(xiàng)目打包成Docker鏡像并運(yùn)行的實(shí)現(xiàn)

更新時(shí)間：2022年08月09日 14:13:52 作者：Song_Estelle

這篇文章主要介紹了vue前端項(xiàng)目打包成Docker鏡像并運(yùn)行的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue前端項(xiàng)目打包成Docker鏡像并運(yùn)行

首先說明咱們的前端項(xiàng)目是基于Vue的，反向代理使用的是nginx

1.打包vue前端項(xiàng)目生成dist文件夾上傳至服務(wù)器

新建一個(gè)文件夾，叫vueDockerTest，下面的文件都需要。

cert是你存放ssl證書的文件夾，nginx.conf 是nginx的配置文件，dist是你打包的前端靜態(tài)文件

2.修改Dockerfile文件

# 基于nginx:1.20鏡像
FROM nginx:1.20
# 將dist文件中的內(nèi)容復(fù)制到 /usr/share/nginx/html/ 這個(gè)目錄下面
COPY dist/ /usr/share/nginx/html/dist/
# 用本地的 nginx.conf 配置來替換nginx鏡像里的默認(rèn)配置
COPY nginx.conf /etc/nginx/nginx.conf
# 將證書文件內(nèi)容復(fù)制到/usr/local/nginx/文件夾下
COPY cert/ /usr/local/nginx/cert/

3.修改nginx.conf文件

#user  nobody;
worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    #tcp_nopush     on;
    #keepalive_timeout  0;
    keepalive_timeout  65;
    #gzip  on;
    # HTTPS server
    server {
        listen 443 ssl;
        server_name  localhost;
        ssl_certificate      /usr/local/nginx/cert/server.crt;
        ssl_certificate_key  /usr/local/nginx/cert/server.key;
        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;
        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;
                location / {
            root   /usr/share/nginx/html/dist;
                        try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
                location /backend/{
                       proxy_set_header Host $http_host;
                       proxy_set_header X-Real-IP $remote_addr;
                       proxy_set_header REMOTE-HOST $remote_addr;
                       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                       client_max_body_size 20M;
                       proxy_send_timeout 500;
                       proxy_read_timeout 480;
                       proxy_pass http://localhost:8992;
               }
                error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

4.打包成docker鏡像

docker build -t nss-web:1.0 .

執(zhí)行docker images可以查看到已經(jīng)生成的docker鏡像

5.運(yùn)行前端鏡像容器

容器內(nèi)部的端口號是443 我使用--net=host，就不需要映射端口號了

如果防火墻開著的話，需要放行443和80端口哦

docker run -d --privileged=true --name nss-web1.0 --restart always --net=host nss-web:1.0

--privileged=true        #容器內(nèi)部擁有root權(quán)限
--restart always         #自啟動(dòng)
--net=host               #網(wǎng)絡(luò)與宿主機(jī)保持一致

6.使用https://你的IP地址即可訪問運(yùn)行

前端將vue打包成鏡像發(fā)布

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

一、總體預(yù)覽

二、打包配置

2.1 default.conf

server {
    listen       80;
    server_name  localhost;
    location / {
        root   /usr/share/nginx/html/;
        index  index.html index.htm;
        # try_files $uri $uri/ /index.html;
    }
    location /finalLearn {
        alias  /usr/share/nginx/html/;
        # index index.html index.htm;
        try_files $uri /finalLearn/index.html;
    }
    error_page   500 502 503 504  /50x.html;
}

2.2 Dockerfile

# 基礎(chǔ)鏡像
FROM nginx
MAINTAINER cw
# 刪除原有的default.conf文件
RUN rm /etc/nginx/conf.d/default.conf
# 增加自定義default.conf文件到對應(yīng)目錄
ADD default.conf /etc/nginx/conf.d/
# 將dist目錄下的文件復(fù)制到nginx內(nèi)的目錄下，與上文對應(yīng)
COPY dist/ /usr/share/nginx/html/

2.3 打包