自動デプロイ付きWEBアプリをheroku無料版で構築する【フロント編】

f:id:Kotaro7750:20200330114829p:plain — 構成

学生が小規模なWEBアプリを作ろうと思った時、ネックになるのはどのサーバーを使おうかという点だと思います。私はケチなので一円たりとも払いたくはありません。そのため、今回は制限内でなら完全無料でDBも作れるherokuでWEBアプリを作成する方法を解説していきます。

長くなりそうなので、今回はフロント部分を解説していきます。

この方法で作ったリポジトリはこれです。

github.com

使うフレームワーク
手順
開発のサイクル
環境変数の取扱
- ローカル開発環境
- heroku環境

使うフレームワーク

今回はVueを使います。とはいっても、記事の内容に具体的なWEBアプリのコードは出てこないので、reactでも生JSでも問題ありません。ただ、パッケージ管理ツールとしてnpmを、サーバープログラムとしてnodeを使うということは予め記しておきます。

手順

なんかサービスを作る

いきなり抽象的ですが、今回の記事は特定のサービスに限らず使えるのでこのような表記にしています。とりあえず動けば何でもいいので、ここではvue createコマンドを利用して、とりあえず動くものを作ります。

# vue以外を使ってる人は雛形を作ってくれるコマンドがあればそれを使ってみてください。
# ここではe-portfolio-frontという名前の雛形を作ります。
$ vue create e-portfolio-front

# 終わると、以下のような中身を持つディレクトリができます
$ ls e-portfolio
README.md  babel.config.js  node_modules  package.json  public  src

上記の手順で作った雛形アプリを拡張していけば、所望の機能を持ったアプリを作れます。

server.jsを作成する

前項でできたディレクトリにserver.jsというファイルを作成します。これはherokuがエントリーポイントとして使うファイルです。またこのエントリーポイント内で実際にサーバとして動かすためにExpressというモジュールが必要なのでこれもインストールします。

npm install express --save

// server.js
var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname + "/dist"));
var port = process.env.PORT || 5000;
app.listen(port);
console.log('server started '+ port);

また、package.jsonのrunスクリプトに以下を追記します。

"start": "node server.js",

以上の変更により、npm start(またはnode server.js)により、server.jsをエントリーポイントとして環境変数PORTをポート番号としてサーバーが起動するようになります。

herokuでアプリケーションを作成する

以下の画像のようなherokuダッシュボードから新しいアプリを作ります。今回はapiとfrontという２つの独立したアプリケーションを作る構成にします。

f:id:Kotaro7750:20200330114848p:plain — herokuアプリの作成

そうしたら、herokuコマンドをインストールします。よくあるheroku記事などではこのコマンドを使って直接デプロイしていることが多いのですが、いちいちこんなコマンドを打つのは面倒くさいのでデプロイには使用しません。ただ、他の方法でデプロイするためのトークンが必要なのでこのコマンド経由で取得します。

# herokuコマンドインストール
$ sudo snap install --classic heroku
$ heroku login
# nodeの環境変数をセットする
$ heroku config:set NODE_ENV=production --app <herokuのアプリ名>

$ heorku auth:token

 ›   Warning: token will expire 03/05/2021
 ›   Use heroku authorizations:create to generate a long-term token
{{ここにトークン文字列が出てくるので保管}}

Github Actionsの設定をする

herokuコマンドの代わりにここではGithub Actionsを使って、masterへのpushがあるたびにデプロイすることにします。

Github Actionsについては、この記事を参照してみてください。

kotaro7750.hatenablog.com

今回のリポジトリには、apiとfront両方のコードを配置しておきたいので、以下のようなディレクトリ構成であるとします。

|- .git
|
|- e-portfolio-front
|   |-server.js
|   |-src
|   |-...
|
|- e-portfoli-api

ここでe-portfolio-frontなどと同一階層に.github/workflowsというディレクトリを作成します。このディレクトリには、GitHub Actionsの設定ファイルを配置します。frontのデプロイ用に以下のようなスクリプトを書きます。

# front.yml
name: ePortfolio-front build-and-deploy

on: 
  push:
    paths:
      - '.github/workflows/front.yml'
      - 'e-portfolio-front/**'

jobs:
  build-deploy:
    runs-on: ubuntu-18.04
    steps:
    - uses: actions/checkout@v2

    - name: remote add Heroku
      env:
        HEROKU_API_TOKEN: ${{ secrets.HEROKU_API_TOKEN }}
        HEROKU_APP_NAME: "herokuのアプリ名"
      run: git remote add heroku-front https://heroku:$HEROKU_API_TOKEN@git.heroku.com/$HEROKU_APP_NAME.git
    
    - name: Deploy to Heroku
      if: github.ref == 'refs/heads/master' && job.status == 'success'
      run: |
        git push heroku-front `git subtree split --prefix front master`:master --force