碼農日常-『Vue3』如何透過Docker打包Vue3成品
閱讀時間約 4 分鐘
最近從我原本的工作崗位離開了，頓時心情輕鬆很多
不果取而代之的是，接下來要做什麼，是我在煩惱的問題
畢竟由於之後有出國留學的規劃，不過因為卡疫情的緣故，暫時無法如願
好啦，以上只是我的碎碎念，不認識我的人大概不知道我在講什麼
今天這篇算是我離職之後的第一篇文章，日後會繼續寫關於網頁開發的東西，請多指教囉:D
ok廢話說完了，接下來是正篇
今天要來聊聊關於在Vue3環境底下使用docker打包的方法
Docker是一種虛擬容器，其實我很喜歡他的Icon
📷
我覺得這個Icon很好地表達了他的用途-把APP連同環境一同打包後部署在實踐環境的一套工具
尤其在寫網頁的時候，要部署網頁到實際的主機時，往往還要在主機上設定東設定西
以前端開發來說，要在主機上運行還得裝node或者相關程式語言套件等等等
如果你的主機有多重用途，你還得想辦法讓這些套件不要互相打架
一來一往間其實造成了上架的不少負擔
而Docker就很好地解決了這個問題，在自身原有的電腦上把所有東西都模組化後，直接一口氣搬到主機上，並使其開始運行，就是Docker的迷人之處
那麼今天要實作的，就是我們建立一個Vue3的專案，然後原封不動地把他包裹進Docker，並運作在本地電腦中
📷
然後Github範例在此
好，來吧！
1. 確認環境&開一個Vue專案
在開始之前，首先必須確保你的電腦有安裝docker
安裝的部分，如果使用桌面版，下載地址在這裡
至於如果要使用指令下載指令，那可以使用以下指令
curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun
然後輸入
docker-v
📷
然後，確認一下vue環境
vue --version
📷
基本上，以上兩者就是必要準備的，確認以上都完成後就是建立一個Vue專案
vue create vuedocker
然後選擇vue3配置
📷
跑完後，使用npm run serve來確認專案初始是否完整
📷
OK到此，大致就已經完成了初步
那麼接下來就要來實際把這些東西放進docker
2. 撰寫Dokerfile
接下來，在專案底下新增一個「DockerFile」的檔案（不需要副檔名，Dockerfile即可，字跟大小寫都要打對）
📷
然後在Dockerfile裡面，填入以下程式
FROM node:lts-alpine as build-stageWORKDIR /appCOPY package.json ./RUN npm installCOPY . .RUN npm run buildFROM nginx:stable-alpine as production-stageCOPY --from=build-stage /app/dist /usr/share/nginx/htmlEXPOSE 80CMD ["nginx", "-g", "daemon off;"]
然後在終端機輸入這行
docker build -t vuedocker .
(後面的.要記得加喔！)
「vuedocke」是image的名字，照你喜歡的取就好
跑完後會像這樣
📷
這時候，你可以輸入
docker images
會有以下畫面
📷
或者可以打開docker桌面版，點選images
📷
再來，要將它變成container，並且執行
請在終端機輸入以下指令
docker run -p 80:80 -it --name vuedocker vuedocker
📷
這時候建立的container會執行，但是按下control+c會停止，怎麼辦？
首先，為要確認是否已經成為了container，請先鍵入以下指令
docker ps -a
📷
確認有docker container後，鍵入
docker start vuedocker
📷
這時候網頁就成功執行囉！
那如果想停止的話，請鍵入
docker stop vuedocker
而這些操作，實際上也都可以使用介面來做
📷
不過未來上架，這些東西也得用Linux指令下去完成，總之就都學起來吧！
Ok，寫到這邊，應該是可以順利以loalhost開啟網頁了
等之後把整套系統移植到生產環境後，其localhost就會換成你的ip，或者是你的域名囉
那麼最後...
📷
15會員
3內容數
留言0
查看全部
你可能也想看
Google News 追蹤
為什麼要用Docker安裝？
Docker是一個容器化平台, 就類似於我們早期虛擬機的VMWare、Virtual Box…等, 虛擬機平台一般, 只是面向的是伺服端, 供企業快速、簡單、輕量的佈署開發完成的程式軟體, 並將相關的環境依賴皆封裝成一包所謂的映像檔(image), 透過這樣的方式減少
Docker-Compose負責對container做快速編排。設定檔預設名稱為docker-compose.yml，在檔案中，可以透過COMPOSE_FILE或-f對設定進行定義。
想要將專案透過Docker-Compose部署，需要創建docker-compose.yml和Dockerfile
Docker是一種容器化技術，可以將應用程式及相關依賴項目打包到一個容器中。這篇文章介紹了安裝Docker的步驟，以及幾個比較偏向使用者的應用程式。
前言
大家好上次我們教了如何下載 Docker Image 使用，今天我們要教如何產出自己的 Image，這次會使用一個 Dockerfile 範例，自行打包 Docker Image，初步練習使用 Docker 指令
下載 Dockerfile 教學檔案
在這裡我已經幫忙寫好一個 Docke
當你安裝完docker，並且設定好所有相關程序後。你正要使用docker去進行操作，讓專案可以在容器哩，方便平台移轉、備份、共用等等等等等;如果你遇到CUDA docker runtime 的問題時，這篇正適合你閱讀。
開始之前，如果你要參考怎麼安裝docker，設定docker環境，請參考:
前言
上次我們初步體驗 Docker 快速佈署能力，今天我們要來講解 Dockerfile、Docker Image 與 Docker Container 這些常見的名詞，我們來了解在我們佈署的時候做哪些事情
Docker 佈署流程
首先看到如下圖上半部，在我們一個完整的佈署流程，我們會先將我
前言
大家好在先前我們講了什麼是 Docker，Docker 好處有什麼以及怎麼安裝 Docker，今天我們要來開始初體驗 Docker 容器，使用後您會發現 Docker 非常的方便快速
Docker Hub 介紹
首先在開始學怎麼抓取 Docker Image 之前，我們要先來介紹 Doc
前言
上次我們講到 Docker 的功用與好處，今天我們要在講解，如何安裝 Docker 這個容器，讓我們在之後的教學應用更好的實作與練習，現在讓我們開始吧
Docker Engine 與 Docker Desktop
首先在講解怎麼安裝 Docker 時，我們先講解 Docker Engin
前言
上次我們針對 Docker 這樣容器化技術做了一點介紹，今天我們要來講解 Docker 架構，你是否發現在每次程式上伺服器的流程很麻煩呢 ? 是否發現你寫的程式在別的作業系統不能用呢 ? 如果你遇到這些問題，Docker 都可以幫助你解決這些問題
Docker 架構
在 Docker 這
前言
大家好我們今天要來教 Docker 這項技術，什麼是 Docker ? Docker 可以幫助我們做什麼事情 ?
Docker 是一項容器化技術，他可以降低我們在佈署 App 時，讓我們可以有效的分配作業系統資源，降低佈署作業成本，現在讓我們來了解 Docker 要解決的問題
傳統佈署遇
為什麼要用Docker安裝？
Docker是一個容器化平台, 就類似於我們早期虛擬機的VMWare、Virtual Box…等, 虛擬機平台一般, 只是面向的是伺服端, 供企業快速、簡單、輕量的佈署開發完成的程式軟體, 並將相關的環境依賴皆封裝成一包所謂的映像檔(image), 透過這樣的方式減少
Docker-Compose負責對container做快速編排。設定檔預設名稱為docker-compose.yml，在檔案中，可以透過COMPOSE_FILE或-f對設定進行定義。
想要將專案透過Docker-Compose部署，需要創建docker-compose.yml和Dockerfile
Docker是一種容器化技術，可以將應用程式及相關依賴項目打包到一個容器中。這篇文章介紹了安裝Docker的步驟，以及幾個比較偏向使用者的應用程式。
前言
大家好上次我們教了如何下載 Docker Image 使用，今天我們要教如何產出自己的 Image，這次會使用一個 Dockerfile 範例，自行打包 Docker Image，初步練習使用 Docker 指令
下載 Dockerfile 教學檔案
在這裡我已經幫忙寫好一個 Docke
當你安裝完docker，並且設定好所有相關程序後。你正要使用docker去進行操作，讓專案可以在容器哩，方便平台移轉、備份、共用等等等等等;如果你遇到CUDA docker runtime 的問題時，這篇正適合你閱讀。
開始之前，如果你要參考怎麼安裝docker，設定docker環境，請參考:
前言
上次我們初步體驗 Docker 快速佈署能力，今天我們要來講解 Dockerfile、Docker Image 與 Docker Container 這些常見的名詞，我們來了解在我們佈署的時候做哪些事情
Docker 佈署流程
首先看到如下圖上半部，在我們一個完整的佈署流程，我們會先將我
前言
大家好在先前我們講了什麼是 Docker，Docker 好處有什麼以及怎麼安裝 Docker，今天我們要來開始初體驗 Docker 容器，使用後您會發現 Docker 非常的方便快速
Docker Hub 介紹
首先在開始學怎麼抓取 Docker Image 之前，我們要先來介紹 Doc
前言
上次我們講到 Docker 的功用與好處，今天我們要在講解，如何安裝 Docker 這個容器，讓我們在之後的教學應用更好的實作與練習，現在讓我們開始吧
Docker Engine 與 Docker Desktop
首先在講解怎麼安裝 Docker 時，我們先講解 Docker Engin
前言
上次我們針對 Docker 這樣容器化技術做了一點介紹，今天我們要來講解 Docker 架構，你是否發現在每次程式上伺服器的流程很麻煩呢 ? 是否發現你寫的程式在別的作業系統不能用呢 ? 如果你遇到這些問題，Docker 都可以幫助你解決這些問題
Docker 架構
在 Docker 這
前言
大家好我們今天要來教 Docker 這項技術，什麼是 Docker ? Docker 可以幫助我們做什麼事情 ?
Docker 是一項容器化技術，他可以降低我們在佈署 App 時，讓我們可以有效的分配作業系統資源，降低佈署作業成本，現在讓我們來了解 Docker 要解決的問題
傳統佈署遇