Vue.js + Docker 部署

該配置也適用於其它 gulp、webpack 類型的項目（須要經過node.js打包成靜態文件並部署到服務器的）

腳手架建立vue項目（示例用）

建立一個demo項目。

vue init webpack demo01
複製代碼

寫dockerfile配置文件

完整的dockerfile文件

放在項目的根目錄。

Dockerfile

FROM node:8-slim
RUN apt-get update && apt-get install -y nginx WORKDIR /usr/src/app COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"] RUN npm install COPY . . RUN npm run build RUN ln -sf /dev/stdout /var/log/nginx/access.log \ && ln -sf /dev/stderr /var/log/nginx/error.log EXPOSE 80
RUN cp -r dist/* /var/www/html \ && rm -rf /user/src/app CMD ["nginx","-g","daemon off;"] 複製代碼

dockerfile文件配置詳解

基礎鏡像node,以及安裝nginx。

FROM node:8-slim
RUN apt-get update && apt-get install -y nginx 複製代碼

在鏡像中建立目錄/usr/src/app以及進入到該目錄中。用來臨時存放項目代碼。

WORKDIR /usr/src/app 複製代碼

下載node依賴。

# 拷貝三個依賴相關的json文件到 "/usr/src/app" 目錄下

COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"] 
# 下載依賴
RUN npm install 複製代碼

拷貝項目全部文件到 /usr/src/app 目錄下。（這裏選擇了先下載依賴，再拷貝項目的全部文件到鏡像中。）

COPY . . 複製代碼

運行打包命令

RUN npm run build 複製代碼

將nginx的日誌軟鏈接到了標準輸出和標準錯誤。這樣能夠經過 docker logs 查看nginx的日誌。

RUN ln -sf /dev/stdout /var/log/nginx/access.log \ && ln -sf /dev/stderr /var/log/nginx/error.log EXPOSE 80
複製代碼

移動打包後的文件到 nginx的 html目錄下。並將項目源文件移除(沒有用了，要的只是打包後的靜態文件)。

RUN cp -r dist/* /var/www/html \ && rm -rf /user/src/app 複製代碼

配置項目啓動命令。-g 'daemon off;'配置參數將會使nginx前臺運行，若是後臺運行，docker容器會直接退出。

CMD ["nginx","-g","daemon off;"] 複製代碼

部署

將項目移動到部署的系統中（以linux爲例）,並進入到項目根目錄中。

將項目打包成docker鏡像。鏡像名稱爲demo,版本號爲1.0

docker build -t demo:1.0 .
複製代碼

-t <鏡像名稱>:<版本號>

建立容器並運行。這裏用的是nginx-proxy進行代理。直接打開 <域名> 便可訪問。

docker run -d -p 80 -e VIRTUAL_HOST=<域名> demo:1.0

# 能夠開多個容器。nginx-proxy會自動配置負載均衡
docker run -d -p 80 -e VIRTUAL_HOST=<域名> demo:1.0
複製代碼

Vue history模式處理、API代理(附加)

須要配置nginx。配置文件能夠放在項目中打到鏡像內，還有就是放在宿主機中映射到容器內。這裏選擇的是後者，方便運維操做。

在宿主機中新建配置示例文件

/root/conf/demo.conf

server {
    listen       80;
    server_name  <域名>;
    # 接口代理
    location /api {
        # .... 省略
    }
    
    # vue `history` 模式配置
    location / {
        root /var/www/html;
  		try_files $uri $uri/ /index.html;
	}
}
複製代碼

改動啓動命令

docker run -d -p 80 -e VIRTUAL_HOST=<域名> -v /root/conf:/etc/nginx/conf.d  demo:1.0
複製代碼

-v <宿主機路徑>:<容器路徑>