abstract
端的に言うと、GitHubPagesに公開している、フロントエンドのみで構成されたアプリケーションをHerokuに移行しました。
※今回のアプリケーションはVue-CLI + webpackのアプリケーションですが、そうでないアプリケーションを移行したい場合でも、基本的な流れは同じだと思います。
背景
過去にVue.jsでポケモンずかんを作りました。「ポケモンずかん」はバックエンドの実装をしておらず、フロントエンドのJavaScriptと外部のAPIだけで作ったものになります。「ポケモンずかん」の実装はフロントエンドのみなので、GitHubPagesでの公開が可能です。ですので、GitHubPagesに公開していました。しかし、Herokuを使えばGitHubPagesに頼ることなくデプロイできるようなので移行してみました。
Heroku とは
Herokuは作成したアプリケーションを簡単にデプロイできるサービスです。Herokuは様々なバックエンドの主要な言語に対応しています。Herokuには有料プランがありますが、趣味程度のアプリケーションのためにHerokuを使うのであれば、無料の範囲で使えると思います。私は今後バックエンドを含めた何かしらのアプリケーションを作りたいと思っていたので、その意味でも、Herokuに挑戦してみました。もちろん、私のようにフロントエンドだけで構成されたアプリケーションをデプロイすることもできます。
手法
Herokuにデプロイするために、バックエンドに変わるモノは必要となります。なのでNode.jsを使ってサーバの肩代わりをしてもらいます。とはいえ、難しい手続きはありません。
HerokuはGitHubにpushする感覚に近く、簡単にデプロイすることができました。※後述します。
実行環境
| version | |
|---|---|
| Node.js | v11.15.0 |
| OS | macOS Catalina v10.15.7 |
| プロセッサ | Intel Core i5 |
Herokuの利用
Herokuを利用するための手順を記述します。
アカウント作成
- Herokuで新規登録します。
- メールが届きます。リンクをクリックして認証ページへ遷移します。
- 手順に従い、パスワードの設定をします。
Heroku CLIをインストール
Homebrewからインストールします。Homebrewをインストールしていない場合は別途インストールが必要です。
$ brew -v
Homebrew 2.6.0 // インストール済み
Homebrew/homebrew-core (git revision feacfd; last commit 2020-12-02)
インストールします。
$ brew tap heroku/brew && brew install heroku
バージョンが表示されれば完了です。
$ heroku -v
heroku/7.47.4 darwin-x64 node-v12.16.2
Herokuにログイン
コマンドラインからログインします。アカウントを作成したときのメールアドレスとパスワードを入力します。
$ heroku login -i
heroku: Enter your login credentials
Email: "メールアドレス"
Password: "パスワード"
ローカルリポジトリ
GitHubに保管している（もしくはGitHubPageで公開している）アプリケーションをローカルに落とします。
GitHubからクローンを取得する
任意の場所に作業ディレクトリを作成します。
$ mkdir github //任意の名前
Gitの環境を構築します。
$ git init
リポジトリのクローンを取得します。
$ git clone 'Herokuで公開したいGitHubリポジトリのURL.git'
取得したアプリケーションの配下に移動します。
$ cd "アプリケーション"
アプリケーションの編集
Vue.jsを実行するためにNode.jsのExpressを使います。
Expressのインストール
$ npm i express
expressがpackage.jsonに追加されていることを確認できます。
// package.json
//略記
{
"dependencies": {
"express": "^4.17.1",
}
}
server.js
Expressに必要なファイルを用意します。
Herokuに実行してもらうソースコードのディレクトリ、つまりビルドしたソースコードのディレクトリを指定します。
※もし、GitHubPagesを利用して公開している人はビルドしたソースコードのディレクトリ名をdocsにしていると思います。それに合わせてdocsとすればOKです。
// server.js
const express = require('express');
const serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname + "/docs")); // dist,socs等のディレクトリ名
const port = process.env.PORT || 5000;
app.listen(port);
console.log('server started '+ port);
package.json
下記のように変更します。
// package.json
//略記
{
"scripts": {
"start": "node server.js", // 変更
}
}
ビルド
落としてきたアプリケーションに必要なライブラリをインストールします。
$ npm i
ビルドします。
$ npm run build
Herokuにデプロイ予定のアプリケーションをローカルで実行し、事前に確認できます。
$ node server.js
Gitにコミット
$ git add .
$ git commit -am "メッセージ"
Herokuの実行
コマンドを入力し、デプロイ先を作成します。
実行するとHeroku上のアプリケーション名とURLを取得できます。末尾が.herokuapp.com/のURLがデプロイ先です。
$ heroku create 'アプリケーション名'
デプロイします。
$ git push heroku master
動作確認
デプロイで表示されたURLにアクセスします。表示されていれば完了です。
終わりに
GitHubPagesに頼りきりでしたがバックエンドをデプロイすることはできないので、何か手ごろなものはないかと探した結果たどり着きました。次はバックエンドを含めて使ってみたいと思います。
最後まで読んでいただきありがとうございます。
もし間違っているところを見かけたらお教えください！🙏
追記
config/index.jsを修正する
Github Pages用にファイルパスを編集していたのを忘れていました。忘れずにもとに戻しましょう。
// 省略
build: {
// Template for index.html
index: path.resolve(__dirname, '../docs/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../docs'),
assetsSubDirectory: 'static',
assetsPublicPath: '/', //修正