跟我一起使用Vue.js + Docker 部署項目


本文學習自:https://juejin.im/post/5bee5ddde51d457b8a33938c
項目環境是在ubuntu下,記得要在root目錄下,不然安裝vue會報錯

npm install -g vue-cli
vue init webpack demo01
cd demo01
npm run dev


dockerfile文件配置詳解
基礎鏡像node,以及安裝nginx。
FROM node:8-slim
RUN apt-get update && apt-get install -y nginx
在鏡像中創建目錄/usr/src/app以及進入到該目錄中。用來臨時存放項目代碼。

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM