概要

ローカルで開発した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

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インスタンスを起動したら最初にやっておくべき初期設定
上記リンクを参考に、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側でコードが同期されるよう設定する。(参考リンク)

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追加

ローカルでpush -> リモートで自動pullする設定
- 1.のディレクトリのhooks/post-receive.sampleをrename
- mv hooks/post-receive.sample hooks/post-receive
post.receiveの内容
cd /home/user1/myProject/hogeProject git --git-dir=.git pull
実行権限付与 chmod a+x hooks/post-receive
ローカルからpushで動作確認

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

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

概要

準備