Help us understand the problem. What is going on with this article?

Zeit Nowの具体的なTips集

目的とターゲット

みなさんはZEIT Nowをご存知でしょうか?
ZEIT Nowは静的サイトやサーバレス向けのPaaSです。
今回Next.jsの練習でZEIT Nowを試してみたので、Tipsをまとめます。
ZEIT Nowを使ったことがない方やこれから使おうと考えている方のヒントになれば幸いです。
本記事では

  • Zeit NowとGitHubの連携手順
  • Zeit Nowで環境変数を使う手順
  • Zeit NowとGoogle Cloud Storageの連携手順

についてご紹介します。

ターゲット

  • 駆け出しエンジニア
  • Next.jsを少ない手順でデプロイしたい方

バージョン

  • Now 16.6.3
  • Next.js 9.0.2
  • NPM 6.13.4
  • Node.js v10.16.0

用意するもの

  • Zeit Nowのアカウント
  • GitHubのアカウント
  • Now cli
  • VSCodeなどのエディタ

下記リンクから事前にZeit Nowに登録し、GitHubと連携させます。
https://zeit.co/onboarding
CLIは下記リンクをを参考に
https://zeit.co/download

$npm i -g now

でインストールできます。

GitHubと連携する

https://zeit.co/new/nextjs
にアクセスし、プロジェクトテンプレートからNext.jsのプロジェクトを作成します。
image.png
「Create Git Repository」をチェックしGitHubのページから権限を変更します。
image.png

「All repositories」を選択し、「Save」を押下します。
image.png

権限を変更すると「Deploy」を押下するとデプロイできるようになります。publicリポジトリかprivateリポジトリかは用途に応じて選択してください。
image.png

これでダッシュボードの「Visit」を押下するとデプロイしたサイトにアクセスできます。
image.png

環境変数を使う

今回はNext.jsを使用するのでまずはNext.jsで環境変数を使用するようにコードを変更します。
https://github.com/zeit/next.js/tree/canary/examples/with-dotenv
を参考に

$npm i dotenv

でdotenvをインストールします。
加えてnext.config.jsに設定を追加します。

next.config.js
require('dotenv').config()
module.exports = {
  webpack: config => {
    // Fixes npm packages that depend on `fs` module
    config.node = {
      fs: 'empty',

    }
    return config
  },
  env: {
    // Reference a variable that was defined in the .env file and make it available at Build Time
    TEST_VAR: process.env.TEST_VAR,
  }
}

次に、nowコマンドで環境変数を設定します。

$now secrets add test_var "variable from secrets"

設定した値は下記のように確認可能です。

$now secrets ls

設定した環境変数にコードからアクセスするには設定ファイルを設置します。

now.json
{
  "build": {
    "env": {
      "TEST_VAR": "@test_var"
    }
  }
}

すると、コード内で下記の記述で環境変数にアクセスできます。

process.env.TEST_VAR

環境変数にアクセスできていることがわかります。
image.png

完成形は下記ブランチにまとめました。
https://github.com/tom-256/now_nextjs_example/tree/use-environment-variable

ローカル環境の場合

ローカル環境で環境変数をチェックするときは.envファイルに下記のように設定します。

.env
TEST_VAR=test_var

.envはデフォルトでNowにデプロイされないのでご安心ください。

https://zeit.co/docs/v2/build-step/#ignored-files-and-folders

Google Cloud Storageと連携する

Cloud Storageに画像をアップロードする

Cloud Storageでbucketを作成します。

ファイルをアップロードを押下し、適当な画像を保存します。

AllUsersの読み取り権限を追加します。
image.png

NowにCloud Storage Integrationを追加する

Google CloudのIntegration設定にアクセスし、Addを押下します。
image.png

アカウントを選択し、Addを押下します。

セレクトボックスからプロジェクト名を選択します。
image.png

create a service account keyを押下します。
image.png

Google Cloudコンソールが開くのでサービスアカウントのセレクトボックスで「新しいサービスアカウント」を選択します。

サービスアカウント名、役割(今回はCloudStorageを使うのでストレージ管理者を選択)を入力して作成を押下します。

jsonファイルがダウンロードされるので、その中身をコピーしてテキストエリアに貼り付け、Connectを押下します。

認証に成功すると下記の画面に遷移します。

バケット一覧が表示され、連携していることが確認できます。Cloud Storageの欄で「Add To Project」を押下します。

すると、下記コマンドでglcoudのクレデンシャルが追加されていることが確認できます。

$now secrets ls | grep gcloud

integrationの設定は下記URLで確認できます。
https://zeit.co/dashboard/integrations

環境変数を設定する

ここまででprocess.env.GCLOUD_CREDENTIALSでGoocle Cloudのクレデンシャルにアクセスできるようになります。

つまり、now.json側に環境変数の設定は必要ありません。
ただし、今回はNext.jsを使っているので、Next.js側に設定が必要になります。

next.config.js
  env: {
    // Reference a variable that was defined in the .env file and make it available at Build Time
    TEST_VAR: process.env.TEST_VAR,
    GCLOUD_CREDENTIALS: process.env.GCLOUD_CREDENTIALS,
  }

コードは下記のようになります。

pages/api/image.js
  const storage = new Storage({
    projectId: process.env.GCLOUD_PROJECT_ID,
    credentials: JSON.parse(
      Buffer.from(process.env.GCLOUD_CREDENTIALS || "", "base64").toString()
    )
  });

ここまでのコードは下記ブランチにまとめました。
https://github.com/tom-256/now_nextjs_example/tree/cloud-storage-integration
上記コードはCloud Storageのバケット名なども環境変数に入れたので、Now Cliで登録することをお忘れなく。
すると下記のようにCloud Storageの画像が読み込めることが確認できます。

ローカル環境でprocess.env.GCLOUD_CREDENTIALSにアクセスする場合は、下記のようにbase64エンコードした結果を、.envに貼り付けます

$cat service-account-key.json | base64
.env
GCLOUD_CREDENTIALS="上記の出力結果"

その他Tips

検索しづらさ

NowはそのままGoogle検索してもなかなか情報が見つかりづらいです。
「Zeit Now xxx」のように検索するとよいでしょう。

更新頻度の多さ

情報の更新頻度が高いのでなるべく公式に近い情報を参照しましょう。(本記事はあくまで2019年12月時点の情報です。)
私は公式ドキュメント、GitHubリポジトリ、Spectrumなどで情報を集めました。

https://zeit.co/docs
https://github.com/zeit/now
https://spectrum.chat/zeit/now?tab=posts

(今回の記事を書いてる途中でNowのバージョンがあがっていました。)

まとめ

今回は以下のことを実施しました。

  • NowとGitHubを連携させる
    リモートブランチにプッシュするごとにデプロイ
  • Nowで環境変数を使う
    CLIで環境変数を登録し、now.jsonに記述する
  • NowとGoogle Cloud Storageを連携させ画像を表示させる
    Integrationの設定からサービスアカウントキーを作成し登録する

実施した結果はこちらです。

リポジトリは下記です。(今後Now側で環境変数を変更した場合や、Cloud Storageに変更を加えた場合は動かなくなるのでご了承ください。)
https://github.com/tom-256/now_nextjs_example/

今回は駆け出しエンジニアの方向けに画像を多めにしてみました。
Next.js以外にもNuxt.jsなどのフレームワークにも対応しているので、ドキュメントサンプルリポジトリを探して自分の好みの環境で試してみるとよいでしょう。
みなさんもZeit Nowを使って気軽に開発を始めてみてはいかがでしょうか?

mt0m
dmmcom
総合エンタテイメントサイト「DMM.com」を運営。会員数は2,900万人を突破。動画配信、FX、英会話、ゲーム、太陽光発電、3Dプリンタなど40以上のサービスを展開。沖縄での水族館事業参入、ベルギーでのサッカークラブ経営など、様々な事業を手掛ける。また2018年より若手起業家の支援を強化、「DMM VENTURES」による出資や、M&Aなどを積極的に展開している。
https://dmm-corp.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした