Azure VM + Nuxt.js(SSR) でWebアプリをリリースする方法

# 概要
ローカルで開発したWebアプリをMicrosoftのクラウドサービスAzureへデプロイする方法。

* Azure VMへsshでリモートログインする。
* ローカルのGit pushによるVM側リモートへの自動デプロイ。
* ネットワーク設定（ポート開放）
* 独自ドメイン設定

# 準備
* Webアプリ（本記事では、ローカル環境で実装したNuxt.js(SSR) + MySQL）
* Git, ssh の知識
* 独自ドメイン（お名前.comなどで取得。なくても良い。）

* SSH public keyを用意 
  `$ ls -al ~/.ssh // 既存のキーの確認`
下記のいずれかがあれば良い。
　* id_dsa.pub
　* id_ecdsa.pub
　* id_ed25519.pub
　* id_rsa.pub
なければ以下のコマンドで作成する。
`$ ssh-keygen -t rsa -b 4096 -C "your_email@example.com"`
ファイルの保存先は特にしていなければそのままEnterでOK
パスワードは適当なものを入力。

# 1. Azure Portalへログイン
  --> [Azure Portal](https://portal.azure.com/) 

# 2. VMを追加
  以下のいずれかでVirtual Macineを追加
  * +アイコンの「Create a resource」で「Virtual Macine」を検索
  * 「Virtual Macine」アイコンより、「Virtual Macine」を追加

### Create a virtual macine
Subscription: 作成したサブスクリプションを選択。
Resouce Group: 任意で選択。ない場合は新規作成。
Virtual machine name: 任意のマシン名の設定。
Region: サーバーの地域。（本記事では「Japan East」）
Image: インストールOS（本記事ではUbuntu 18.04 LTS）
Size： Standard B1MS

Administrator account
Authentication type： SSH publick key
Username: ログイン時のユーザー名を設定
SSH public key:前述の生成された.pubの中身をコピペ

Inbound port rules
Public inbound ports:  Allow selected port
Select inbound ports: SSH (22)

Review + create ボタン押下でVMを作成する。



# 3. VM初期設定
VMの画面にて、左側にメニューが表示される。
よく使う項目は
* Overview (VMの再起動、IPアドレス動的/静的割り当て設定、DNS名設定、使用状況の確認など)
* Networking (ポート開放などを行う)

  [Azure VMでLinuxインスタンスを起動したら最初にやっておくべき初期設定](https://www.buildinsider.net/pr/microsoft/azure/dictionary04)
上記リンクを参考に、DNS名ラベルの設定、SSHポート開放、タイムゾーンをJSTに変更など、一通り実施しておく。

### ドメイン設定時
[Overview] -> [Public IP Address]リンクをクリック -> 割り当てを”静的”(static)に固定する。
さらに、お名前.comなどでAレコードの入力欄にそのIPアドレスを登録すると設定できる。

### ポート開放
[Networking] -> [Inbound Port rules] -> [Add inbound port rule]にて設定を追加していく。
Priority(優先度)は高く（数値を小さく）する。

以下のような設定でSSH, http, httpsのポートを開放しておく。

|Priority  |Name  |Port  | Protocol  | Source  |Destination  |Action  |
|---|---|---|---|---|---|---|
|100  |SSH  |22  |TCP  |Any  |Any  |Allow  |
|101  |http  |80  |Any  |Any  |Any  |Allow  |
|102  |https  |443  |Any  |Any  |Any  |Allow  | 

### Node.js, npmインストール
    $ sudo apt-get update
    $ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
    $ sudo apt-get install -y nodejs

### SSH接続設定
##### 公開鍵と秘密鍵を作成する 
※冒頭の[SSH public keyを用意]で実施ずみなのでしなくても良い      

    $ cd ~/.ssh 
    $ ssh-keygen -t rsa -b 2048
 
##### 公開鍵をVMへアップロード
    $ scp id_rsa.pub ユーザー名@IPアドレス:~/.ssh/authorized_keys
##### 接続する
    $ ssh ユーザー名@IPアドレス

以上でVMへSSHログインができるようになる。

##### ローカルの ~/.ssh/configファイルに以下のような記述を加えると、より簡単にSSH接続ができる。 
    Host azure-taro               <--- 任意の名前
      Hostname **.***.**.***      <--- Public IP Address
      User taro                   <--- VMのユーザー名
      Port 22                     
      IdentityFile ~/.ssh/id_rsa  <--- 公開鍵があるローカルのパス
これでターミナルで

    ssh azure-taro 
のようにしてSSH接続が可能になる。

# 4. Git設定
ローカルリポジトリでpushするとVM側でコードが同期されるよう設定する。([参考リンク](https://qiita.com/timids/items/7d6d20a4d13d0604e8e4))
##### 1. リモート(VM)でベアリポジトリ作成

	$ git init --bare hoge.git
##### 2. ローカルでリモートリポジトリを追加

	$ git add remote origin hoge:/home/hogeuser/apps/myapp.git
* 既にリモートリポジトリが存在する場合
  * git/configに1.のベアリポジトリのURLを追加  
  `ssh://hogeuser@**.***.**.***:**/home/hogeuser/apps/myapp.git`

##### 3. ローカルで、git push origin master -> 1.のディレクトリ上でgit logで動作確認

##### 4. クローン（リモートで作業ディレクトリ作成）
    $ git clone /home/hogeuser/apps/myapp.git

##### 5. git hook追加
	
1. ローカルでpush -> リモートで自動pullする設定
    * 1.のディレクトリのhooks/post-receive.sampleをrename
    * mv hooks/post-receive.sample hooks/post-receive
1. post.receiveの内容
```
cd /home/user1/myProject/hogeProject
git --git-dir=.git pull
```

1. 実行権限付与 chmod a+x hooks/post-receive
1. ローカルからpushで動作確認

* このファイルにサーバー再起動など、pull後の処理を追記しても良い。

### End