docker部署vue靜態項目

說在前面

我在網上搜索了不少docker部署vue項目的教程，其中不少的文章不乏都是先將vue項目執行npm run build 在本地進行打包，傳到本身的倉庫去，而後到服務器去拉取咱們的代碼，獲取dist文件，再將該文件掛載到dockr容器內。其實這種操做應當是有缺陷的，咱們應當把打包的操做也放到docker的鏡像裏面去操做。

部署步驟

在項目根目錄下面新建Dockerfile文件:

# resum Dockerfile

  #指定node鏡像對項目進行依賴安裝和打包
  FROM node:10.16.0 AS builder
  # 將容器的工做目錄設置爲/app(當前目錄，若是/app不存在，WORKDIR會建立/app文件夾)
  WORKDIR /app   COPY package.json /app/   RUN npm config set registry "https://registry.npm.taobao.org/" \ && npm install   
  COPY . /app   RUN npm run build 
  #指定nginx配置項目，--from=builder 指的是從上一次 build 的結果中提取了編譯結果(FROM node:alpine as builder)，便是把剛剛打包生成的dist放進nginx中
  FROM nginx
  COPY --from=builder app/dist /usr/share/nginx/html/   COPY --from=builder app/nginx.conf /etc/nginx/nginx.conf 
  #暴露容器80端口
  EXPOSE 80
複製代碼

能夠看到，在這裏我將打包操做也放到Dokcerfile裏面進行操做了。

COPY --from=builder app/dist /usr/share/nginx/html/
複製代碼

該條命令是將咱們在鏡像裏面打包生成的dist文件放進容器內nginx的web目錄下面。

COPY --from=builder app/nginx.conf /etc/nginx/
複製代碼

該條命令是將咱們項目目錄下面的nginx.conf文件複製到容器內nginx的配置文件的目錄下面，從而覆蓋原有的配置文件。
nginx.conf:

#user nobody;
 worker_processes  1;
 events {
     worker_connections  1024;
 }
 http {
     include       mime.types;
     default_type  application/octet-stream;
     sendfile        on;
     keepalive_timeout  65;

     #gzip on;
     gzip on;
     gzip_min_length  5k;
     gzip_buffers     4 16k;
     #gzip_http_version 1.0;
     gzip_comp_level 3;
     gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
     gzip_vary on;
     
     # 設置簡歷項目
     server {
         listen  80;
         server_name www.xieyezi.com;
         location / {
             root /usr/share/nginx/html;   #站點目錄
             index index.html index.htm;   #添加屬性。 
         }
     
         location = /50x.html {
             root   /usr/share/nginx/html;
         }
     }
 }
複製代碼

進入本身的服務器(個人服務器爲ubuntu 18.04)，在根目錄下面建立一個web目錄。接着進入該目錄，利用git拉取咱們的項目代碼到該目錄。

1. clone本身的項目: git clone xxxx;
2. 在項目的根目錄下，新建一個文本文件:.dockerignore:

.git
 node_modules
 npm-debug.log
複製代碼

該文件會排除以上的三個路徑下的文件，告訴docker不要將這三個打包到image文件。
3. 製做鏡像

docker image build -t [imageName]:1.0 .
複製代碼

製做鏡像以後,咱們便可根據容器運行咱們的鏡像:

docker run -p 8080:80 -d --name [containerName] [iamgeName]
複製代碼

接着在控制檯輸入docker ps命令便可看見咱們剛剛啓動的容器信息。 接着輸入域名進行測試，正常運行。