1、創(chuàng)建一個(gè)vue項(xiàng)目，其他文章上有介紹如何創(chuàng)建vue項(xiàng)目，自行查看

vue create docker-vue-demo  

2、創(chuàng)建完成后build vue項(xiàng)目

npm run build

build 成功后項(xiàng)目根目錄會生成一個(gè)dist 目錄，然后把這個(gè)目錄打包上傳到服務(wù)器中

image.png

3 、拉取 Nginx 鏡像

docker pull nginx:latest

會出現(xiàn)如下日志

Using default tag: latest
latest: Pulling from library/nginx
33268f69048f: Pull complete
cda70de1684e: Pull complete
2ece0010a9f9: Pull complete
3acc98c10333: Pull complete
cda70de1684e: Pull complete
Digest: sha256:4ecad4bb0d8a456b8ef88ffc86a4cc1554b6be59c2920df8476053b59e2d811e size: 2816
Status: Downloaded newer image for nginx:latest
docker.io/library/nginx:latest

如果你出現(xiàn)這樣的異常，請確認(rèn) Docker 實(shí)例是否正常運(yùn)行。

Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?  

完成后，在項(xiàng)目根目錄創(chuàng)建 Nginx 配置文件

touch nginx.conf  

編寫nginx配置

events {
    worker_connections  1024;
}

http {
    client_max_body_size 10M;
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    client_header_timeout 600;
    client_body_timeout 600;
    keepalive_timeout  600;
    underscores_in_headers on;

    gzip on; 
    gzip_static on;
    gzip_buffers 4 16k;
    gzip_comp_level 5;
    gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    
    server {
        listen       80;
        server_name  localhost;
        charset utf-8;

        proxy_read_timeout 600;
        proxy_send_timeout 600;

        location / {
          root   /docker-vue-demo;
          index  index.html index.htm;
        }
    }
}

4、制作鏡像
在項(xiàng)目的根目錄下創(chuàng)建一個(gè)Dockerfile文件，用于構(gòu)建鏡像
打開 Dockerfile ，寫入如下內(nèi)容：

FROM nginx 
WORKDIR /web
COPY dist/ /docker-vue-demo/
COPY nginx.conf /etc/nginx/nginx.conf  

備注
FROM nginx 指定該鏡像是基于 nginx:latest 鏡像而構(gòu)建的
WORKDIR 指定容器的一個(gè)目錄
COPY dist/ /docker-vue-demo 將項(xiàng)目根目錄下 dist 文件夾中的所有文件復(fù)制到鏡像中 docker-vue-demo/ 目錄下；
COPY nginx.conf /etc/nginx/nginx.conf 將 nginx.conf 復(fù)制到 etc/nginx/nginx.conf 用本地的 nginx.conf 配置來替換 nginx 鏡像里的配置。

5、構(gòu)建鏡像Docker 通過 build 命令來構(gòu)建鏡像 . 表示在當(dāng)前目錄

docker build -t docker-vue-demo .

備注

-t 參數(shù)給鏡像命名 docker-vue-demo
. 是基于當(dāng)前目錄的 Dockerfile 來構(gòu)建鏡像
執(zhí)行成功后，將會輸出：

Sending build context to Docker daemon  52.07MB

Step 1/3 : FROM nginx
 ---> 8cf1bfb43ff5
Step 2/3 : COPY dist/ /docker-vue-demo/
 ---> Using cache
 ---> 9a3d9f94c84b
Step 3/3 : COPY nginx.conf  /etc/nginx/nginx.conf 
 ---> 7df6efaf9592
Removing intermediate container e946dae3a800
 ---> f889c601aca5
Successfully built f889c601aca5
Successfully tagged docker-vue-demo:latest

通過docker images 查看鏡像是否制作成功

6、運(yùn)行鏡像

docker run -d -p 49999:80 --name vue-demo docker-vue-demo

備注：

-d 設(shè)置容器在后臺運(yùn)行
-p 表示端口映射，把本機(jī)的 49999 端口映射到 container 的 80 端口，49999是對外訪問的端口，http://服務(wù)器IP:49999進(jìn)行訪問
--name 設(shè)置容器名 vue-demo
docker-vue-demo 是我們上面構(gòu)建的鏡像名字

通過docker ps 命令查看容器

END