はじめに

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

事前準備

Windows10をお使いの方

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

node.jsをインストール

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

Ubuntu

# nvmバージョン確認
nvm -v

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

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

VueCLIをインストール

VueCLIの公式サイトを参考にVueCLIをインストールします。

Ubuntu

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

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

Macをお使いの方

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

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

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

Githubのアカウントをお持ちでなければ作成してください。
ついでに、New repositoryからgitのリポジトリを作成してください。

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

GithubにSSHキーを登録する

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

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

Windowsターミナル

clip < .ssh/id_rsa.pub

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

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

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

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

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

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です。

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

Ubuntu

cd hello-vue
npm run serve

以下が表示されれば成功です。

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

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

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

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

Ubuntu

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

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

vue.config.js

module.exports = {
          publicPath: './'
}

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

Ubuntu

npm run build

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

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

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

Ubuntu

mv dist/* ../
cd ..
ls

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

Ubuntu

git add .
git commit -m"deploy web app"
git push

githubにアクセスして確認します。

WEBアプリを公開する。

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

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

公開URLをクリックします。

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

おわりに

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

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

以上です。