iT邦幫忙

2021 iThome 鐵人賽

DAY 30
0
Modern Web

連線網頁卡牌遊戲(Elixir, Phoenix, Liveview)系列 第 31

30 部署, 附遊戲連結 (可以玩拉!)

  • 分享至 

  • xImage
  •  

什麼你不想部署,沒關係我部署好了:

怎麼玩,複習一下規則

雖然規則簡單,但裡面沒有指引與說明,沒有看前面的朋友應該會滿困惑的
這邊就複習一下怎麼建立遊戲跟遊戲規則:

建立遊戲:
按下 "Start a game" 後,下面有 "Copy to clipboard" 按鈕可以複製連結,
再貼給朋友(如果你跟我一樣沒有朋友,可以開兩個分頁玩)
雙方都按 "Yes" 後遊戲開始

規則:
每場遊戲有三回合,三戰兩勝
每回合出三張卡,三張卡點數加起來大的贏該回合,
"Rev" 卡是把該局獲勝條件相反,可以疊加

遊戲網址
http://card.weizheng.tw

原始碼在這
https://github.com/weizhengliu/card

都有設計了當然還有部署

這邊也是偷懶快的部署
如果要部署正式的東西建議不要用這個做法

開好機器後 開機器就不介紹了有點範圍外
我是在 linode 開一台東京的伺服器
作業系統這邊用 ubuntu 20.04 LTS 使用者直接用 root

在部署之前有幾個東西要改

  1. config/prod.exs 檔案裡面 他有預設的網址 example.com,必須要是部署後的網址,還沒有就先填會連的 ip
  2. config/runtime.exs 的第 38 行 config :card, CardWeb.Endpoint, server: true 要把他取消註解

安裝 erlang

wget -O- https://packages.erlang-solutions.com/ubuntu/erlang_solutions.asc | sudo apt-key add -
echo "deb https://packages.erlang-solutions.com/ubuntu focal contrib" | sudo tee /etc/apt/sources.list.d/erlang-solution.list
sudo apt update
sudo apt install esl-erlang

安裝 elixir

sudo apt install elixir

安裝 nodejs

這個是從這個說明 偷的
也可以用其他方式裝, 只要是 tailwind 需要的 12.13.0 以上就好
我這邊裝最新的16

curl -fsSL https://deb.nodesource.com/setup_current.x | sudo -E bash -
sudo apt-get install -y nodejs

從 github clone 專案

git clone git@github.com:weizhengliu/card.git

cd card

安裝套件 與 compile

mix deps.get --only prod
MIX_ENV=prod mix compile

產生 SECRET KEY BASE

在專案根目錄執行

mix phx.gen.secret

就會發給我們一段 key
待會把他設定成環境變數

設定環境變數

我們把 port 直接指向 80

export SECRET_KEY_BASE=剛剛產生的很長的key
export PORT=80

準備前端 assets

MIX_ENV=prod mix setup
MIX_ENV=prod mix assets.deploy

發行 release

MIX_ENV=prod mix release

他會顯示

root@localhost:~/card# MIX_ENV=prod mix release
* assembling card-0.1.0 on MIX_ENV=prod
* using config/runtime.exs to configure the release at runtime
* skipping elixir.bat for windows (bin/elixir.bat not found in the Elixir installation)
* skipping iex.bat for windows (bin/iex.bat not found in the Elixir installation)

Release created at _build/prod/rel/card!

    # To start your system
    _build/prod/rel/card/bin/card start

Once the release is running:

    # To connect to it remotely
    _build/prod/rel/card/bin/card remote

    # To stop it gracefully (you may also send SIGINT/SIGTERM)
    _build/prod/rel/card/bin/card stop

To list all commands:

    _build/prod/rel/card/bin/card

啟動

他們所有東西都打包發行成 release 到 _build/prod/rel/card
我們照他講的執行 _build/prod/rel/card/bin/card 來列出所有選項

root@localhost:~/card# _build/prod/rel/card/bin/card
Usage: card COMMAND [ARGS]

The known commands are:

    start          Starts the system
    start_iex      Starts the system with IEx attached
    daemon         Starts the system as a daemon
    daemon_iex     Starts the system as a daemon with IEx attached
    eval "EXPR"    Executes the given expression on a new, non-booted system
    rpc "EXPR"     Executes the given expression remotely on the running system
    remote         Connects to the running system via a remote shell
    restart        Restarts the running system via a remote command
    stop           Stops the running system via a remote command
    pid            Prints the operating system PID of the running system via a remote command
    version        Prints the release name and version to be booted

可以直接用 _build/prod/rel/card/bin/card start 來啟動看看
就好了,網頁也連得上了,但是這樣要終端機一直掛著。
先 control + d 兩次退出

所以我們這次要用的是 _build/prod/rel/card/bin/card daemon
他就會跑在背景了,我們也可以離開伺服器

下次上來要關掉伺服器也只需要執行 _build/prod/rel/card/bin/card stop

全部完成了

我架的網址:
http://card.weizheng.tw
github repo
https://github.com/weizhengliu/card


上一篇
29.5 如果我要裝 javascript 套件勒?
下一篇
31 賽後想法與遊戲連結
系列文
連線網頁卡牌遊戲(Elixir, Phoenix, Liveview)32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
juck30808
iT邦研究生 1 級 ‧ 2021-10-14 11:52:23

恭喜完賽/images/emoticon/emoticon12.gif

韋政 iT邦新手 4 級 ‧ 2021-10-14 13:18:38 檢舉

/images/emoticon/emoticon41.gif

我要留言

立即登入留言