碼農日常-『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-stage
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["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,或者是你的域名囉
那麼最後...
📷
留言0
查看全部
發表第一個留言支持創作者!
碼農日常,一個從來不怎麼日常的一個頻道 也算是個無聊,來寫點真正的日常。 怨) - 主管再再次被詢問我何時能走 -
大家好我是碼農日常,這是一篇新打的舊卡,老朋友們就讓我們坐下來聊聊我對於當驗證人之後的理想與抱負,新朋友就來用這篇文章認識一下碼農吧! 本名要透露有點害羞,那個就...放一邊吧XD 我的驗證人節點就是碼農日常,大頭貼是沒戴墨鏡版本的小狐狸 懇請多多指教!謝謝!
碼農日常,一個從來不怎麼日常的一個頻道 也算是個無聊,來寫點真正的日常。 怨) - 主管再再次被詢問我何時能走 -
大家好我是碼農日常,這是一篇新打的舊卡,老朋友們就讓我們坐下來聊聊我對於當驗證人之後的理想與抱負,新朋友就來用這篇文章認識一下碼農吧! 本名要透露有點害羞,那個就...放一邊吧XD 我的驗證人節點就是碼農日常,大頭貼是沒戴墨鏡版本的小狐狸 懇請多多指教!謝謝!
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
成為資深工程師的道路,需要具備多方面的專業能力。避免成為「碼農」,必須學習資深工程師必備的5大能力,並透過不同的職涯道路規劃,實現個人與專業度的成長。
Thumbnail
影片有「簡易的香菇昆布湯」製作方法,不用耗時的燉煮素食的高湯,利用食材本身的鮮甜,簡易的製做美味的湯底,並有平常喜歡的茶碗蒸配方與大家分享。
Thumbnail
最近這一部「對我而言危險的他」完整複製了當年的台言霸道總裁的經典啊,劇中男設的設定就是霸道高冷又有點壞,但又常常在女主危險時像白馬王子一樣的出現,光看花絮就讓我熱血沸騰!
Thumbnail
【Quick Calc. 速算-多功能計算機】是一套簡易、清楚、直覺多功能的計算機,秉持著【簡潔】的設計理念,結合「經常使用」的計算模組,所開發出的計算機,全模組皆自行開發,非使用第三方計算機共用模組!
Thumbnail
大家好,全球投資市場充斥不確定性,Risk off的情緒瀰漫整體市場,上週美國CPI數據高於預期,宛如一記響雷打下。 資金湧入美元,推升美元指數來到近期高點,不只影響股市流動性,也會壓抑美元計價的原物料商品。 這次的報告筆者認為最值得留意的是全球庫存,原因在於烏俄戰爭不確定性依舊懸在供需兩端。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
成為資深工程師的道路,需要具備多方面的專業能力。避免成為「碼農」,必須學習資深工程師必備的5大能力,並透過不同的職涯道路規劃,實現個人與專業度的成長。
Thumbnail
影片有「簡易的香菇昆布湯」製作方法,不用耗時的燉煮素食的高湯,利用食材本身的鮮甜,簡易的製做美味的湯底,並有平常喜歡的茶碗蒸配方與大家分享。
Thumbnail
最近這一部「對我而言危險的他」完整複製了當年的台言霸道總裁的經典啊,劇中男設的設定就是霸道高冷又有點壞,但又常常在女主危險時像白馬王子一樣的出現,光看花絮就讓我熱血沸騰!
Thumbnail
【Quick Calc. 速算-多功能計算機】是一套簡易、清楚、直覺多功能的計算機,秉持著【簡潔】的設計理念,結合「經常使用」的計算模組,所開發出的計算機,全模組皆自行開發,非使用第三方計算機共用模組!
Thumbnail
大家好,全球投資市場充斥不確定性,Risk off的情緒瀰漫整體市場,上週美國CPI數據高於預期,宛如一記響雷打下。 資金湧入美元,推升美元指數來到近期高點,不只影響股市流動性,也會壓抑美元計價的原物料商品。 這次的報告筆者認為最值得留意的是全球庫存,原因在於烏俄戰爭不確定性依舊懸在供需兩端。