RailwayとNetlifyで無料ホスティング

はじめに

ポートフォリオや勉強の一環として作成したWebサービスを無料で公開したいというケースはよくあるかと思います。

少し前までならHerokuがありましたが、生憎無料で使えなくなってしまいました。そこで今回はHerokuと似た無料ホスティングサービスのRailwayとNetlifyに、それぞれバックエンドとフロントエンドをホスティングする方法をまとめてみました。

ここでは主にRailwayやNetlifyの設定方法を説明します。
※アプリケーションについては解説しませんのあしからず

構成

Railway
- バックエンド
  - RubyOnRails
  - MySQL
Netlify
- フロントエンド
  - Vue.js

リポジトリは一つにまとめておりディレクトリ構成は下記の様な感じとなっております。

$ tree -L 2                                                                                                                                                                                                                        [master]
.
├── api
│   ├── Gemfile
│   ├── Gemfile.lock
│   ├── README.md
│   ├── Rakefile
│   ├── app
│   ├── bin
│   ├── config
│   ├── config.ru
│   ├── db
│   ├── development.Dockerfile
│   ├── lib
│   ├── log
│   ├── public
│   ├── spec
│   ├── storage
│   ├── test
│   ├── tmp
│   └── vendor
├── docker-compose.yml
└── front
    ├── Dockerfile
    ├── README.md
    ├── babel.config.js
    ├── jsconfig.json
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── public
    ├── src
    ├── vue.config.js
    └── yarn.lock

apiとfrontディレクトリにバックエンドとフロントエンドそれぞれのソースを格納しています。
※Docker関連のファイルがありますがローカルでのみ使用したものなので気にしなくて大丈夫です。

事前準備

RailwayとNetlifyにアカウントを登録しておいて下さい。
またGithubとの連携も済ましておいて下さい。

Railway

MySQL

まずRailwayの方でDBから作っていきます。「New」を押して「Database」→「MySQL」を選択して作成します。

作成したら「Connect」タブからホスト情報が確認出来ます。

RubyOnRails

続けてDBと同様にRubyOnRailsのサービスも作っていきます。
Githubとの連携済みの場合は「New」→「Github Repo」でデプロイしたいリポジトリを選択して下さい。

「Variables」タブで環境変数を登録します。先程のDBのURLを入力します。
※先程の値をそのままコピペするとアダプターが「mysql」となってしまうので、「mysql2」に修正するよう気をつけて下さい。

「Settings」タブの「Domains」項目から公開用ドメインを発行出来ます。

「Service Name」でRailway上で表記されるサービス名(任意)を入力しています。
「Root Directory」という項目でビルドの起点となるディレクトリを指定します。

「Build Command」でビルド時に一度だけ実行させるコマンドを入力します。
「Watch Paths」には差分を監視するディレクトリを入力します。ここで指定したディレクトリ配下のファイルが変更されたときのみ、デプロイが実行されるようになります。

「Start Command」に起動時に実行されるコマンドを入力します。

Railwayでの設定は以上になります。
設定が終わったらデプロイを実行して下さい。

Netlify

「Add new site」→「Inmport an existing project」で先程と同様にデプロイしたいリポジトリを選択してサイトを作成します。

続いて「Site settings」→「Build & deploy」と移動して「Build settings」という項目を設定します。

「Base directory」にルートディレクトリを、「Build command」にはビルド時に一度だけ実行されるコマンドを、「Publish directory」にはコンパイル後に生成されるファイルが排出されるディレクトリを入力して下さい。

「Environment variables」で環境変数を登録します。
下図ではRailwayで発行したドメインを入力しています。

これで基本的な設定は完了となります。
アプリケーションに問題がなければデプロイが成功するはずです。

コメントを残す