在docker中構(gòu)建Vue項(xiàng)目方式

更新時(shí)間：2025年10月25日 09:20:09 作者：Qredsun

本文介紹了如何將前端項(xiàng)目構(gòu)建為Docker鏡像,并在容器中配置Nginx進(jìn)行部署,通過編寫Dockerfile,將前端構(gòu)建和Nginx配置結(jié)合在一起,實(shí)現(xiàn)了一鍵部署

背景

一般發(fā)布前端項(xiàng)目的發(fā)布是將項(xiàng)目生成物上傳至服務(wù)器，然后配置nginx。現(xiàn)在需要將前端構(gòu)建成docker進(jìn)行發(fā)布。

實(shí)現(xiàn)

項(xiàng)目文件結(jié)構(gòu)：

my-vue-app/
├── Dockerfile
├── nginx.conf
├── package.json
├── public/
├── src/
└── …

編寫dockerfile

將構(gòu)建和ngxin配置在一起實(shí)現(xiàn)

# 構(gòu)建階段
FROM node:18-alpine as builder

WORKDIR /app

# 復(fù)制項(xiàng)目文件
COPY package*.json ./
RUN npm install

COPY . .

# 構(gòu)建 Vue 項(xiàng)目
RUN npm run build

# 生產(chǎn)階段：使用 nginx 運(yùn)行構(gòu)建產(chǎn)物
FROM nginx:alpine

# 拷貝構(gòu)建結(jié)果到 nginx 的目錄中
COPY --from=builder /app/dist /usr/share/nginx/html

# 如果你有自定義 nginx 配置，可以覆蓋默認(rèn)配置
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;
    }
}

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

docker搭建es集群實(shí)現(xiàn)過程詳解
這篇文章主要為大家介紹了docker搭建es集群實(shí)現(xiàn)過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
Docker網(wǎng)絡(luò)代理設(shè)置詳解
在一些實(shí)驗(yàn)室環(huán)境，服務(wù)器沒有直接連接外網(wǎng)的權(quán)限，需要通過網(wǎng)絡(luò)代理。本篇文章主要介紹了Docker網(wǎng)絡(luò)代理設(shè)置詳解，有興趣的可以了解一下。
2017-02-02
docker<容器數(shù)據(jù)卷-v>對(duì)容器內(nèi)數(shù)據(jù)持久化詳解(備份)
容器的數(shù)據(jù)持久化主要是指宿主機(jī)與容器,以及容器與容器之間進(jìn)行數(shù)據(jù)交互,下面這篇文章主要給大家介紹了關(guān)于docker<容器數(shù)據(jù)卷-v>對(duì)容器內(nèi)數(shù)據(jù)持久化的相關(guān)資料,需要的朋友可以參考下
2023-03-03
Linux安裝docker以及docker安裝軟件教程
這篇文章主要介紹了Linux安裝docker以及docker安裝軟件教程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2025-06-06
idea?連接遠(yuǎn)程?docker?并部署項(xiàng)目到?docker的過程
這篇文章主要介紹了idea連接遠(yuǎn)程docker并部署項(xiàng)目到docker,本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-10-10
Docker-Compose搭建Spark集群的實(shí)現(xiàn)方法
本文主要介紹了Docker-Compose搭建Spark集群的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-05-05
docker容器commit打包越來越大的原因分析及解決
文章介紹了Docker容器打包變大的原因,并提供了解決方法,具體步驟包括使用export命令導(dǎo)出容器,然后使用import命令導(dǎo)入鏡像,最后將鏡像展開成容器,這種方法可以有效減少鏡像文件的大小,避免因Docker鏡像層的概念導(dǎo)致的文件膨脹問題
2025-03-03
安裝Docker后如何驗(yàn)證是否安裝成功的方式
這篇文章主要介紹了安裝Docker后如何驗(yàn)證是否安裝成功的方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2025-03-03
docker容器的內(nèi)存以及狀態(tài)詳解
通過docker stats獲取容器ID,結(jié)合ps -ef獲取進(jìn)程PID,利用top -p PID分析內(nèi)存占用,用于排查阿里云ECS實(shí)例內(nèi)存過高問題,參考阿里云幫助中心相關(guān)說明進(jìn)行處理
2025-08-08
解決docker拉取鏡像報(bào)錯(cuò):error pulling image configurat
在使用Docker拉取Kafka鏡像時(shí)可能會(huì)遇到"error pulling image configuration"的錯(cuò)誤,這可以通過編輯Docker配置文件并重啟Docker服務(wù)來解決,具體步驟包括：1. 編輯Docker配置文件；2. 使用命令systemctl restart docker重啟Docker服務(wù)
2024-11-11