前端vue打包成docker鏡像啟動(使用nginx服務)

 

 

首先創建一個nginx配置文件，這個文件后面會替換nginx鏡像中的配置文件

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 =404;
    }

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

 

創建Dockerfile文件

FROM nginx

MAINTAINER “作者/維護者姓名”

RUN rm /etc/nginx/conf.d/default.conf

ADD default.conf /etc/nginx/conf.d/

COPY dist/ /usr/share/nginx/html/

 

如果用docker-compose啟動的話，

docker-compose.yml

services:
  vue:
    build:
      context: .  #Dockerfile 所在目錄
      dockerfile: Dockerfile 
    image: vue  #鏡像名稱
   # restart: unless-stopped
   # network_mode: "host"
    privileged: true
    container_name: vue
    volumes:
      - /logs:/logs
    ports:
      - 8080:80

context: .  :這表示當前目錄，也就是說Dockerfile和docker-compose在同一目錄，

上面這個可以根據自己的來 ，我上面是映射了8080端口出來，所以訪問是localhost:8080，docker內部之所以是80 ,是因為我們上面的nginx配置文件我們監聽的是80端口

 

目錄結構為

 

 

最后執行

docker-compose build
docker-compose up -d

 

啟動成功后，訪問 localhost:8080（這個是服務器內部訪問，外部需要自己修改ip地址）