# ポートフォリオのデプロイ

ポートフォリオを Heroku にデプロイする手順です。

# Heroku にデプロイするための準備

Heroku で静的ファイルをホストする方法は用意されていないため、静的ファイルをホストするサーバープログラムを用意します。今回は Node.js で簡単に作成します。

まず、ポートフォリオを作成したディレクトリに移動し、 code . コマンドで Visual Studio Code を開きます。

続いて以下の 3 つのファイルを作成します。

~~/package.json
~~/server.js
~~/Procfile

# package.json

package.json を作成し、以下の内容をコピー＆ペーストします。

~~/package.json

{
  "name": "portfolio",
  "version": "1.0.0",
  "description": "Portfolio",
  "scripts": {
    "start": "node ./server.js"
  },
  "engines": {
    "node": "16.x"
  },
  "dependencies": {
    "express": "^4.18.1"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# server.js

server.js という名前のファイルを作成し、以下の内容をコピー＆ペーストします。

TIP

~~/public ディレクトリ内のファイルをレスポンスするサーバープログラムです。

const express = require('express')
const createError = require('http-errors')

const app = express()
const port = process.env.PORT || 3000

app.use(express.static('public'))

app.use((req, res, next) => {
  next(createError(404))
})
app.use((err, req, res, next) => {
  res.status(err.status || 500).send(`${err.message}`)
  if (err.status !== 404) console.error(err)
})

app.listen(port, () => {
  console.log(`Server started on Port=${port}.`)
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Procfile

これらのプログラムを実行するよう Heroku に指示するファイルを作成します。 Procfile を作成し以下の一行を記載します。 Procfile に関する詳細は Node.js の Heroku Getting Started (opens new window) をご覧ください。

~~/Procfile

web: npm start

ここまでで、ファイルは以下のようになっているはずです。

# GitHub リポジトリに反映する

手元の状態がすべて GitHub 上に反映されているようにしてください。

コマンド例

※ GitHub Desktop を使用し Push しても問題ありません。

$ git add .
$ git commit -m "update files"
$ git push origin main

1
2
3

# Heroku 上でアプリを作成する

Heroku のダッシュボード (opens new window) で New → Create new app を選択します。

アプリ名を入力して、アプリを作成します。

ここでは、ts-user-web-portfolio-yumi と入力していますが、任意の値を入力してください。すでに使用されている値は使用できません。ここで入力した値は、結果的に https://{アプリ名}.herokuapp.com/ という URL で全世界に公開されます。

Create App を押します。

作成後は以下のような画面が表示されます。一度、右上の Open App をクリックしてみましょう。

以下のようなページが表示されています。このページは全世界に公開されているあなた専用の Web ページです。「Heroku | Welcome to your new app!」と表示されていますが、このページを、作成したポートフォリオの内容に変更していきます。

# Heroku と GitHub リポジトリを連携する

先程の画面に戻ります。「Deploy」のタブが表示されていることを確認し、GitHub から Connect To GitHub を選択します。

以下のようなポップアップが表示されます。 Authorize heroku をクリックします。

自分のユーザー名が選択されていることを確認し、ポートフォリオのリポジトリ名を入力し、 Search をクリックします。

デプロイしたいリポジトリの Connect をクリックします。

Connect to {デプロイしたいリポジトリ名} by {GutHub のユーザー名} のメッセージが表示されればうまく連携されています。

# デプロイの自動化を有効にする

少し下にスクロールし、「Automatic deploys」のセクションで「Choose a branch to deploy」の項目から、公開したいブランチ（例では main ブランチ）が選択されていることを確認し、「Enable Automatic Deploys」をクリックします。

この設定は、例えば main を選択し Automatic Deploys を有効にすると、 main ブランチに Push された際に自動的にそのブランチの内容が Heroku に反映されるようになる設定です。有効にしておくと、内容を変更したあと、 main ブランチに Push するだけで、公開中のサイトを更新できるようになり便利です。

# 手動デプロイを実行する

上記の設定は、Push 検知時のデプロイを有効にしました。最初の一回目は反応しないため、手動デプロイを行います。少し下にスクロールし、「Manual deploy」のセクションに移動します。「Choose a branch to deploy」でデプロイしたいブランチ (例では main ブランチ)を選択し、 Deploy Branch をクリックします。

デプロイ作業が始まるため、しばらく待機します。

デプロイが完了すると、以下のように緑色のチェックマークが表示されます。

# 表示の確認

先程の Web ページを開き、ページがうまく表示されているか確認しましょう。

ポートフォリオの公開は以上です。スマートフォンや、他の人の端末に URL を共有して、うまく表示されているか確認してみましょう。

← Heroku 登録掲示板アプリのデプロイ →