parcel + phinaで簡単ゲーム開発環境構築 その３
Webに公開
前の記事でゲームの開発環境を整えました。
ただ、ゲームは公開して誰かに遊んでもらいたいですよね。
ここまで、楽々に環境構築を行って来たので公開に関しても楽々行いたいと考えています。
色々な方法があると思いますが、この記事では netlify というサービスを使った方法を紹介します。
netlifyとは？
簡単にいうとホスティングサービスです。ただ、netlify はホスティング以外にも機能があります。
指定したブランチに push を自動で検知してデプロイしてくれたり、https 対応、カスタムドメインの設定、webhook などなど様々な機能があります。
細かい機能についてはnetlifyのドキュメントページをご覧ください。
今回 netlify を選んだのは、自動デプロイ機能の設定が簡単なのに使いやすいからです。
ここまで設定ファイルなしでやってきたので、デプロイに関しても出来るだけ設定なしでいきたいと思いこちらを採用しました。
デプロイするアプリ
前の記事で作成した、おすすめ構成をデプロイしたいと思います。
実際にこちらにデプロイしました。
手順をなぞりながら実装方法を試す場合は、github のリポジトリをフォークして、フォークしたリポジトリでデプロイしてみてください。
設定方法
まずホームページにアクセスして、 [ Sign Up ] をクリックします。
GitHub、GitLab、Bitbucket、Email があります。
お好きなアカウントでサインアップしましょう。
サインアップが完了してログインしたら以下のような画面が表示されます。
アプリの設定を行いましょう。
[ New site from Git ] をクリックしてください。
使う Git のプロバイダーを選びます。
今回は GitHub に上がっている私のコードを使うので、GitHub をクリックします。
この時連帯がされてない場合は GitHub の連帯確認画面が表示されます。
確認して連帯してください。
次にリポジトリを選択します。
今回の場合は [ parcel-phina-simple-example ] を選びます。
ちなみにプレイベートリポジトリも選択可能です。
最後にデプロイの設定を行います。
設定といっても、デプロイ対象ブランチ、ビルドコマンド、ビルドファイル出力ディレクトリをしていするだけです。
今回は以下のように設定します。
設定が完了したら、 [ Deploy site ] をクリックします。
すると、サイトのデプロイが開始します。
今はまだデプロイ中で見ることができません。
デプロイ状況は [ Production deploys ] から確認できます。
クリックするとデプロイ状況を示すコンソール画面が表示されます。
しばらく待つとビルドが完了します。
先ほどのページに戻ると、緑色になっておりデプロイが完了しています。
urlをクリックしてページを開きましょう。
以下のような画面が表示されていたら完了です。
サブドメンの変更
ちなみにサブドメインはランダムに割り振られますが、編集可能です。
サブドメインはサイト名を変えることで変更可能です。
まず、 [ Site settings ] をクリックします。
[ Site details ] の [ Site information ] の [ Change site name ] をクリックします。
お好きな [ Site name ] を入力して、 [ Save ] をクリックします。
＊注意＊
今回例で使った parcel-phina-simple-example はこのアプリで使っているので多分使えません
別の名前を指定してください。
するとサブドメインが変更されます。
自動デプロイの確認
次に自動デプロイが出来ているか確認しましょう。
適当にreadmeあたりを編集して master ブランチにプッシュしましょう。
先ほど設定したアプリのページを見ると BUILDING と表示されてビルドが走っているのが確認できます。
これで自動デプロイが動いていることを確認出来ました。
まとめ
このように netlify を使うことで簡単に開発から公開までの流れを作ることが出来ました。
あとは開発に集中してゲームを開発するだけです。
静的なサイトなのでサーバーレスなどに比べて監視が不要なので、そういった所のコストも削減できます。
これで一応一通りの開発環境とデプロイ設定まで完了しました。
次の記事では趣向を変えて、今回作成したアプリをデスクトップアプリにビルドする方法を紹介します。
