ubuntu docker 部署 vue 項目

• ​​初​​

• ​​檢查安裝nginx的鏡像​​
• ​​編譯打包vue項目​​

• ​​檔案内容如下：​​

• ​​default.conf​​
• ​​Dockerfile​​

• ​​建立鏡像：千萬不要漏掉最後的一個點​​
• ​​啟動容器：​​
• ​​結果​​

初

希望能寫一些簡單的教程和案例分享給需要的人

檢查安裝nginx的鏡像

通過指令确認是否安裝完成：

sudo docker images

sudo docker images      

如果沒有nginx ，就需要安裝這個鏡像，可以指定某個版本，也可以選擇最新版，我這邊選的是最新版

sudo docker pull nginx:latest      

編譯打包vue項目

npm run build      

打包後，我們會看到檔案夾 dist

把檔案拖到 ubuntu 伺服器中

然後建立兩個檔案：

1. default.conf
2. Dockerfile

檔案内容如下：

default.conf

FROM nginx
MAINTAINER webapp
RUN rm /etc/nginx/conf.d/default.conf
ADD default.conf /etc/nginx/conf.d/
COPY dist/ /usr/share/nginx/html/      

Dockerfile

server {
    listen       80;
    server_name  192.168.246.133; # 修改為docker服務主控端的ip，可以通過指令 ip addr 檢視

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
                
    location /prod-api/ {
        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;
        proxy_pass http://localhost:8080/;
        client_max_body_size 50m;
        sendfile on;
        keepalive_timeout 1800;
    }       

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}      

建立鏡像：千萬不要漏掉最後的一個點

sudo docker build -t 【鏡像名】 .

sudo docker build -t watch-web .      

啟動容器：

sudo docker run -d -p 9090:80 --name 【容器名】【鏡像名】

sudo docker run -d -p 9090:80 --name watch1 watch-web      

結果