自分で作ったWEBアプリ（Vue.js）をインターネット公開しよう

# はじめに

WEBアプリを構築して、インターネットに公開する方法についてまとめます。
WEB画面の構築は、HTMLやCSS,Bootstrap,jQueryなど様々な技術要素があります。
今回、WEBで大流行しているフロントエンドフレームワーク、**Vue.js**を利用します。

# 事前準備

## Windows10をお使いの方

まずはUbuntu20.04（WSL）をインストールしましょう。
Linuxは、コマンドベースでサクサクと環境構築ができて非常に便利です。
拙著で恐縮ですが、構築手順は[コチラ](https://qiita.com/hiyasichuka/items/862ba40bd249488f7b02)を参考してください。

### node.jsをインストール

Node.jsバージョン管理ツールの**nvm**を利用しましょう。
[公式Github](https://github.com/nvm-sh/nvm)の**Install & Update Script**を参考にインストールしましょう。
WSLのターミナルでバージョン確認によって、nvmのインストールが正常完了していることを確認した後、Node.jsをインストールします。

```sh:Ubuntu
# nvmバージョン確認
nvm -v

# nvmでNode.js LTS版（長期サポート版）をインストールして使用する
nvm install --lts
nvm use node --lts

# nodeバージョン確認
node -v
```

### VueCLIをインストール

[VueCLIの公式サイト](https://cli.vuejs.org/guide/installation.html)を参考にVueCLIをインストールします。

```shell:Ubuntu
# vue/cliインストールする
npm install -g @vue/cli

# バージョン番号が表示されればOK
vue --version
```

## Macをお使いの方

ターミナルを起動して、上記を参考に下記手順を進めてください。

- nvmをインストール
- Node.jsをインストール
- VueCLIをインストール

## Githubアカウントおよびリポジトリを作成する。

[Github](https://github.com/)のアカウントをお持ちでなければ作成してください。
ついでに、New repositoryからgitのリポジトリを作成してください。

以下はweb-appというリポジトリをつくった様子です。
Repository nameを入力して、Add a README fileにチェックを入れた後、Create repositoryを押下します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533960/935ed837-7e2a-84d8-921e-e3b5035eab3d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533960/5ead1117-c2b2-7ff6-3dff-13fdbd3152c7.png)

## GithubにSSHキーを登録する

Settingsから SSH and GPG keysをクリックして、New SSH Keyを押下します。
ローカルPCのSSH公開鍵を登録しておきます。

Windowsの場合は、SSH鍵を作成後、以下のようなコマンドでSSH公開鍵をコピーできます。

```shell:Windowsターミナル
clip < .ssh/id_rsa.pub
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533960/b9899e6d-8e29-e6aa-a29c-d384ba04f939.png)


## Githubのリモートリポジトリをクローンする。

任意のフォルダを作成して、git cloneしてください。
以下はリポジトリをgit cloneしたときのキャプチャです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533960/f24b7c49-0946-fa83-02c6-3fae56a08d4e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533960/f6de2eae-daf5-29c4-b265-9a94aecc1257.png)



## VueCLIでVueのプロジェクトを新規作成する。

クローンしたリポジトリのディレクトリに移動して、Vueプロジェクトを新規作成します。

※npmリポジトリ変更するか聞かれた場合、taobao.orgは中国のサイトなので、nを選択してください。
※※Vue2かVue3を選択するところは、Vue3を選択してください。

```shell:Ubuntu
# リポジトリに移動
cd web-app

# vueコマンドでプロジェクト作成
vue create hello-vue

# Use https://registry.npm.taobao.org for faster installation? (Y/n)
# ↑これが出てきた場合、nを入力してEnter
```

vue createコマンド実行後に以下が出ればOKです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533960/b442f31a-b119-56e7-bd0d-da9e5db93f94.png)

Get started with the following commandsの通り、以下コマンドを実行してみます。

```shell:Ubuntu
cd hello-vue
npm run serve
```

以下が表示されれば成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533960/4564b87b-2e8e-cfed-da48-b0edca2728c5.png)


ブラウザを開いて、 http://localhost:8080/ にアクセスしてみます。
Welcome to Your Vue.js Appと表示されていれば、Vueアプリが正常起動しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533960/fbbea285-1fc8-bce6-f4fd-9ca606ca1e0d.png)

# WEBアプリのビルドを行う。

## ビルド後のindex.htmlを開くとWEB画面が真っ白になる現象への対応

このままビルドを行うとVueの仕様上、WEB画面が正常に表示されない問題があります。
この問題に対処するため、vue.config.jsファイルを作成する必要があります。

```shell:Ubuntu
# ファイルを作成してvimエディタで開く
vim vue.config.js
```

vue.config.jsに以下を貼り付けます。

```js:vue.config.js
module.exports = {
          publicPath: './'
}

```


それでは、初期状態のVueアプリをビルドしてgithubにデプロイして公開します。
本来であれば、src配下に.vueファイルなどのソースを追加していきます。
VueCLIによるビルドは、npm run buildで実行できます。
ビルドによって、src配下などのファイル群を集約して最適化してくれます。

```shell:Ubuntu
npm run build
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533960/c073f869-8816-6e7a-a6df-1d1bad39d98a.png)

ビルド後、distフォルダがつくられ、そこにデプロイすべきファイルが出力されています。

# WEBアプリをデプロイして確認する。

distフォルダ内のファイルをすべてリポジトリのルート（今回はweb-app）に移動させます。

```shell:Ubuntu
mv dist/* ../
cd ..
ls
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533960/26a53f4a-e388-9e7c-c9ee-ca10aba47e6b.png)


その後、デプロイ（githubにコミット＆プッシュ）します。

```shell:Ubuntu
git add .
git commit -m"deploy web app"
git push
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533960/c0a390fd-8226-025f-60cc-b953b54d02c6.png)

githubにアクセスして確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533960/4448da93-e2e0-6e36-fb16-9b5bc96d45dd.png)

# WEBアプリを公開する。

リポジトリのSettingをクリック、Pagesをクリックします。
mainブランチを選択してSaveします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533960/b90bfa13-f17d-611b-91a9-b0c75cd0940d.png)

Saveすると公開URLが表示されます。
デプロイ後、サイトに反映されるまでしばらく時間がかかります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533960/915c8d4d-94ef-f901-513d-0fb5d7fd3816.png)


公開URLをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533960/562260d3-811a-7f8e-40aa-b1ce40f8ffc0.png)


無事にWEBアプリをインターネット上に公開することができました。

# おわりに

Githubにリポジトリを作成して、VueCLIでVueアプリをビルド＆デプロイする流れについて記載しました。

VueCLIでカスタムVueアプリを作る内容についても近々、執筆したいと思います。

以上です。