Web アプリのデプロイ：GitHub Desktop を使った GitHub へのプッシュ

Forge は、オートデスクがクラウドサービスの開発で培った要素技術を、複数の Web API として公開しているブランド名です。Forge を利用するのは、通常、Web サーバー上に構築することになる Web アプリケーション（以降、Web アプリ）です。

Forge を利用する Web アプリの開発は、誰もがアクセス出来る Web サーバー上でおこなうのではなく、開発者が使用するコンピュータを使ってローカルコンピュータで実施し、完成した後、あるいは、完成に近い状態で Web サーバーに展開（デプロイ）するのが一般的です。

このため、ローカルコンピュータ上で Web アプリをテストする際には、Web ブラウザ上で http://localhost:3000 などのように実行することになります。この場合、開発中の Web アプリは、ローカルコンピュータからのみしか実行出来ません。逆に言えば、誰にでもアクセスしてもらうには、完成した Web アプリを Web サーバーにデプロイする必要があります。

デプロイ作業の選択肢は多様なため、いままで、このブログであまり触れていませんでした。今後、数回に渡って、ローカルコンピュータで開発している Web アプリのデプロイを前提に、基本的な概要といくつかの手順をご案内していきたいと思います。基本的な考え方を把握いただくため、Forge に特化せずに説明を加えていきます。

次回以降、Forge アプリの紹介で比較的よく利用されている Heroku や Microsoft Azure へのデプロイを前提にしていくことにします。今回は、その準備にあたる GitHub の理解とツール、手順をご紹介しすることにします。

※ ご紹介する画面遷移は2019年4月時点のものです。今後当該サービスプロバイダーによって変更される可能性があります。

ローカルでの Web アプリの準備

まず、Web アプリとして Visual Studio 2017 Professional エディションで作成した Node.js テンプレートを利用したスケルトンプロジェクトを利用します。なお、Visual Studio 2017 Professionalで Node.js プロジェクトを作成するには、インストールで Node.js 開発を選択しておく必要があります。

Visual Studio 2017 Professional エディションを起動して、Node.js プロジェクトを作成します。[ファイル(F)] メニューから [新規作成(N)] >> [プロジェクト(P)] を選択します。
[新しいプロジェクト] ダイアログが表示されたら、「空の Node.js Web アプリケーション」テンプレートを選択、プロジェクト名に
NodejsWebApp1 と命名して [OK] ボタンをクリックします。「新しい Git リポジトリの作成(G)」にはチェックを入れないでください。
作成されたスケルトンプロジェクトの実行をテストしてみます。[デバッグ(D)] メニューから [▶ デバッグッグの開始(S)] を選択して、Web ブラウザが起動後に server.js の実装である Hello World が表示されることを確認してください。

GitHub とは

近年、開発の現場で耳にすることが多くなった GitHub ですが、一言で言うと、開発プロジェクト用のソースコード管理をおこなうクラウドサービス、という位置づけです。無償版と有償版があり、オートデスクも有償版（GitHub Enterprise）を使って、クラウドサービスや AutoCAD などのデスクトップ製品のソースコードを管理し、チーム開発をおこなっています。

GitHub でソースコード管理するのはリポジトリという単位です。ローカルコンピュータのリポジトリを ローカルリポジトリ、GitHub サイトjにあるリポジトリをリモートリポジトリと表現します。ローカルコンピュータ上にある開発中、あるいは、完成したソースコードはコミットすると、ローカルリポジトリに記録されます。その後、ローカルリポジトリの内容をプッシュすると、GitHub サイト上のリモートリポジトリに記録されます。この流れでリモートリポジトリを使って、共同開発者と一緒にソースコードを管理していきます。

リポジトリには、運用中のソースコードと、新機能や不具合修正した次期バージョン用のソースコードを並行して開発していけるよう、ブランチという単位も存在します。互いのブランチは独立して管理されるので、ローカルリポジトリに運用中の master とブランチと次期バージョン用の next version というのように、複数のブランチを作ってメインテナンスすることが可能です。

開発環境に依存せずに Heroku をや Azure に Web アプリをデプロイ（Web サイトを公開）には、ローカルコンピュータ上にある実行可能なソースコード一式を、いったん、GitHub リポジトリにアップロード（プッシュ）しなければなりません。

GitHub の利用には GitHub アカウントが必要です。もし、GitHub アカウントをお持ちでなければ、https://github.com/join?source=header-home からサインアップ（アカウント登録）することが出来ます（無償）。

GituHub Desktop とは

ローカルリポジトリの作成やコミット、ブランチの作成や切り替え、リモートリポジトリへのプッシュは、プロンプトによるコマンド操作が一般的ですが、少しわかりにくいのが難点でした。この点を解決したのが、ユーザインタフェースで同等の操作が可能な GitHub Desktop です。

GitHub Desktop は、https://desktop.github.com/ から無償でダウンロード、インストールして利用することが出来ます。

Web アプリの GitHub へのプッシュ

前置きが長くなりましたが、ここから、ローカルリポジトリを作成、GitHub 上のリモートリポジトリへのプッシュ作業をおこなっていきます。便宜上、今回はローカルリポジトリの master ブランチをプッシュしていきます。

ローカルでの Web アプリの準備 で作成した Web アプリ NodejsWebApp1 プロジェクト のパスを確認します。ここでは、既定値の C:\Users\<windows user name>\source\repos\NodejsWebApp1 フォルダ下にプロジェクトがあり、アプリの実行時に実行される server.js が、C:\Users\<windows user name>\source\repos\NodejsWebApp1\NodejsWebApp1 フォルダ下に存在しているものとします。
GitHub Desktop を起動して、GitHub アカウントでサインインします。[File] メニューから [Options] を選択してください。
[Accounts] タブ内の「GitHub.com」右横の [ Sign in ] ボタンをクリックしてください。
GitHub アカウントを入力して [ Sign in ] ボタンをクリックしてサインインを完了します。このサインイン操作で、リポジトリとアカウントが関連付けられます。
次に [File] メニューから [Add local repository....] を選択します。
[Add local repository] ダイアログが表示されたら、[Choose...] ボタンをクリックします。
server.js が存在する C:\Users\<windows user name>\source\repos\NodejsWebApp1\NodejsWebApp1 フォルダをナビゲートし、[フォルダーの選択] ボタンをクリックします。
"This directory does not appear to be Git repository. Would you like to create a repository here instead?" の警告メッセージとともに、[Add local repository] ダイアログが再び表示されるはずです。ここでは、このままメッセージ内の create a repository をクリックします。
NodejsWebApp1 が Name（リポジトリ名）として設定されている [Create a new repository] ダイアログが表示されるので、ここでは他の項目をそのままにして [ Create repository ] ボタンをクリックします。

※ GitHub 無償枠では、リモートリポジトリはすべて Public モードでソースコードを誰でも閲覧出来るようになっていましたが、2019年1月から、無償枠でもソースコードを非公開とする Private モードを選択出来るようになっています。
「Current repositry」に NodejsWebApp1 が（①）、「Current branch」に master が（②）、それぞれ選択されていることを確認出来たら、[ Publish repository ] ボタンをクリックしてください。

[Publish repository] ダイアログが表示されたら、「Keep this code private」のチェックを外して、[ Publish repository ] ボタンをクリックすると、Publish（パブリッシュ＝最初のプッシュ）が始まります。
しばらく時間がかかりますが、[Publish repository] ダイアログが消えて、何もエラーが出なければ、GitHub へのリモートレポジトリ作成の完了です。GitHub サイトにリモートリポジトリが記録されたかチェックするには、GitHub Desktop 上で [View on GitHub] ボタンをクリックします。
GitHub サイトのリモートリポジトリ NodejsWebApp1 が表示されるはずです。

ローカルリポジトリのコミットとリモートリポジトリへのプッシュ

一度、リモートリポジトリへのプッシュを済ませた後も、GitHub Desktop はローカルリポジトリのソースコード編集を監視しています。例えば、NodejsWebApp1 プロジェクトの server.js の一部を編集してファイルを上書き保存してから GitHub Desktop を起動すると、編集箇所が画面に表示されるはずです。
この状態では、またソースコードの変更がローカルリポジトリに記録（コミット）されていません。ローカルリポジトリへのコミットには、GitHub Desktop 左下の変更内容を判別する文字列を記入し、[Commit to master]（master ブランチへのコミット）ボタンをクリックする必要があります（①）。

コミットしたローカルリポジトリの内容をリモートリポジトリに反映（プッシュ）するには、ローカルリポジトリへのコミット後に、画面表示が更新されて現れる [Push origin] ボタンをクリックしてプッシュしてください（②）。