docker部署nginx+vue項目

1.vue項目打包

npm run build

會在項目生成dist文件夾，這個文件夾可以使用nginx或tomcat來發布服務

2.查找nginx基礎鏡像

可以通過以下網站找到符合自己的基礎鏡像，我們等會兒會在基礎鏡像基礎上構建自己的鏡像。

https://hub.docker.com/

 

3.配置nginx

在項目根目錄下創建nginx文件夾，該文件夾下新建文件default.conf（鏡像里的配置文件為default.conf，自己安裝的window或linux版配置文件為nginx.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;
        try_files $uri $uri/ /index.html;
    }

    #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;
    }
}

4.編寫Dockerfile文件

在項目根目錄創建Dockerfile文件

# 設置基礎鏡像
FROM nginx:1.16.1-alpine
# 將dist文件中的內容復制到 /usr/share/nginx/html/ 這個目錄下面
COPY dist/  /usr/share/nginx/html/
#用本地的 default.conf 配置來替換nginx鏡像里的默認配置
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

 

5. 構建鏡像

docker build -t test-vue-0.0.1 .

 

6.啟動容器

docker run -d --name test-vue -p 9005:80 test-vue-0.0.1

 

可以在瀏覽器訪問了