はじめに
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をインストールします。
# nvmバージョン確認
nvm -v
# nvmでNode.js LTS版（長期サポート版）をインストールして使用する
nvm install --lts
nvm use node --lts
# nodeバージョン確認
node -v
VueCLIをインストール
VueCLIの公式サイトを参考にVueCLIをインストールします。
# 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公開鍵をコピーできます。
clip < .ssh/id_rsa.pub
Githubのリモートリポジトリをクローンする。
任意のフォルダを作成して、git cloneしてください。
以下はリポジトリをgit cloneしたときのキャプチャです。
VueCLIでVueのプロジェクトを新規作成する。
クローンしたリポジトリのディレクトリに移動して、Vueプロジェクトを新規作成します。
※npmリポジトリ変更するか聞かれた場合、taobao.orgは中国のサイトなので、nを選択してください。
※※Vue2かVue3を選択するところは、Vue3を選択してください。
# リポジトリに移動
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の通り、以下コマンドを実行してみます。
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ファイルを作成する必要があります。
# ファイルを作成してvimエディタで開く
vim vue.config.js
vue.config.jsに以下を貼り付けます。
module.exports = {
publicPath: './'
}
それでは、初期状態のVueアプリをビルドしてgithubにデプロイして公開します。
本来であれば、src配下に.vueファイルなどのソースを追加していきます。
VueCLIによるビルドは、npm run buildで実行できます。
ビルドによって、src配下などのファイル群を集約して最適化してくれます。
npm run build
ビルド後、distフォルダがつくられ、そこにデプロイすべきファイルが出力されています。
WEBアプリをデプロイして確認する。
distフォルダ内のファイルをすべてリポジトリのルート（今回はweb-app）に移動させます。
mv dist/* ../
cd ..
ls
その後、デプロイ（githubにコミット＆プッシュ）します。
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アプリを作る内容についても近々、執筆したいと思います。
以上です。