在docker中構建Vue項目方式
更新時間：2025年10月25日 09:20:09 作者：Qredsun
本文介紹了如何將前端項目構建為Docker鏡像,并在容器中配置Nginx進行部署,通過編寫Dockerfile,將前端構建和Nginx配置結合在一起,實現(xiàn)了一鍵部署
背景
一般發(fā)布前端項目的發(fā)布是將項目生成物上傳至服務器，然后配置nginx?，F(xiàn)在需要將前端構建成docker進行發(fā)布。
實現(xiàn)
項目文件結構：
my-vue-app/
├── Dockerfile
├── nginx.conf
├── package.json
├── public/
├── src/
└── …
編寫dockerfile
將構建和ngxin配置在一起實現(xiàn)
# 構建階段 FROM node:18-alpine as builder WORKDIR /app # 復制項目文件 COPY package*.json ./ RUN npm install COPY . . # 構建 Vue 項目 RUN npm run build # 生產階段：使用 nginx 運行構建產物 FROM nginx:alpine # 拷貝構建結果到 nginx 的目錄中 COPY --from=builder /app/dist /usr/share/nginx/html # 如果你有自定義 nginx 配置，可以覆蓋默認配置 COPY nginx.conf /etc/nginx/conf.d/default.conf # 暴露端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]
配置nginx
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了docker之如何查看正在運行的容器問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了docker安裝es與kibana的過程及遇到問題,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-02-02
這篇文章主要介紹了Docker?中?MySQL?的部署與管理技巧,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-08-08
docker容器間互相訪問(docker bridge網絡)
本文主要介紹了docker容器間互相訪問(docker bridge網絡)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
Docker是一個非常有趣的項目,容器是獨立運行的一個或一組應用，及他們的運行環(huán)境,容器是Docker中的一個重要的概念,這篇文章主要給大家介紹了關于docker該如何刪除已停止的容器的相關資料,需要的朋友可以參考下2023-05-05
docker windows10 共享目錄掛載失敗的解決方案
這篇文章主要介紹了docker windows10 共享目錄掛載失敗的解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-03-03
阿里云esc服務器Docker部署單節(jié)點Mysql的講解
今天小編就為大家分享一篇關于阿里云esc服務器Docker部署單節(jié)點Mysql的講解，小編覺得內容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-03-03
這篇文章主要介紹了教你使用如何docker部署淘寶rap2服務，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Docker實現(xiàn)進入容器內部的方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
解決docker報錯Encountered errors while bringing&n
這篇文章主要介紹了解決docker報錯Encountered errors while bringing up the project實測有效！具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03