mottox2 blog

Netlifyで環境変数を設定する

devnetlify

Netlifyではビルドコマンドを設定して、デプロイ時にビルド処理を実行することが多いです。その際に利用するデータベースのユーザーネーム・パスワードや外部サービスのTokenなどは一般的にはソースコードに含めず環境変数に設定します。
こういった値をソースコードから取り除くことで、開発環境と本番環境の差異を小さくしたり、ソースコードを公開しても問題ない状態に保つことができます。
もちろんNetlifyでも環境変数を設定する方法が用意されています。

Web画面で設定する

  1. プロジェクト画面の「Settings > Build & Deploy」をクリックすると「Build environment variables」という設定項目があります。

app_netlify_com_sites_mottox2_settings_general__2_.png (180.0 kB)

  1. この設定項目の「Edit variables」をクリックすると、KeyとValueを入力するテキストフィールドが表示されます。

app_netlify_com_sites_mottox2_settings_deploys__1_.png (172.5 kB)

  1. テキストフィールドに設定したい環境変数を入力しSaveボタンをクリックしてください。
  2. 設定した後のデプロイから環境変数が有効になります。

netlify.tomlで設定する

Web画面での設定が推奨されていますが、netlify.tomlでも環境変数を設定できます。
ただし、netlify.tomlで環境変数を設定する場合、gitの管理下に環境変数が露出するため管理方法に気をつける必要があります。

例えば SOME_VARIABLEsome_value という値を設定する場合、次のようなnetlify.tomlを用意します。

netlify.toml
[build.environment]
  SOME_VARIABLE = "some_value"

Privateリポジトリであれば、こちらの設定でも問題ありませんがPublicにする可能性がある場合はWeb画面で設定を推奨します。

B!
blog

JAMstack関連の海外イベント情報

JAMstackの情報は国内には乏しいので、特に最新情報に関してはNetlifyやGatsbyの情報は海外のものを見るとよい。 その中でもJAMstack confやGatsby Daysの情報は一

gatsbyJAMstack
dev

ReactのUIコンポーネントライブラリに「Sancho UI」はいかが?

GW満喫していますか?私はNext.jsとCloud Functionsを組み合わせたり、FirebaseをバックエンドとしたSPAの検証や、SwiftでiOSアプリを書いて満喫しています。 こう

emotionreact
event

技術書典6にサークル参加したけど反省点が多すぎた

前回に引き続き、技術書典6にサークル主として参加させていただきました。 技術同人誌界隈はかつてない盛り上がりを見せており、今回のサークル当落発表の際は地獄のようなタイムラインになっていました。そうい

技術書典