iT邦幫忙

2023 iThome 鐵人賽

DAY 30
0
自我挑戰組

模仿知名網站的外觀系列 第 30

【Day30】Amazon EC2部署專案-2

  • 分享至 

  • xImage
  •  

接下來我會讓instagram專案在剛創建的執行個體上運行,這是一個純前端的專案,只需複製專案並安裝使用到的npm套件就能正常啟動。

我們來到EC2儀表板,在側邊欄找到執行個體點擊進入這個頁面後,點擊i開頭的執行個體ID。

先點擊安全性再點擊安全群組的藍色連結。

點選編輯傳入規則。

先點擊新增規則,類型選擇自訂TCP,連接埠範圍設定成5173,來源選擇隨處-IPv4。再點擊新增規則,類型選擇SSH,來源選擇隨處-IPv4,最後按下儲存規則。

說明一下,因為instagram專案使用的是localhost:5173,所以連接埠範圍設定為5173,如果是X專案的話,連接埠範圍就是3000。

我們回到有執行個體摘要的頁面,點擊連線,進入連線至執行個體,點擊連線。

接下來會進到黑底白字的界面,這是一個沒有圖形操作界面的ubuntu,等下會使用許多linux指令。

首先安裝nvm,這是一個用來安裝node.js的程式。

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

完成後輸入以下指令,才能在任何位置都能使用nvm。

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

安裝node.js 最新的LTS版本。

nvm install --lts

現在想辦法把專案程式碼放進來,我選擇的是抓取Github上自己存放的程式碼,由於git沒有內建,所以先安裝git,再用git抓取在Github上的專案程式碼。

sudo apt-get install git
git clone https://github.com/[username]/[repository].git

進入專案資料夾,安裝npm套件後,啟動專案。

cd Instagram_clone
npm i
npm run dev -- --host

公有IPv4地址在下圖的紅框處可以找到,來到公有IPv4地址:5173,就能看到我們的專案了。假設公有IPv4地址是1.2.3.4,那麼我們就在瀏覽器打開http://1.2.3.4:5173。


上一篇
【Day29】Amazon EC2部署專案-1
系列文
模仿知名網站的外觀30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言