<html><head></head><body>こんにちは！かわいちです。 今回はNetlifyを使った「本番・ステージ・開発ブランチごとに環境変数の値を設定＆設定する際の注意点」についてまとめていきます。<h2 id="h8a175a9b0e">前提</h2>この例では、GitHubとNetlifyを連携しており、以下のブランチ構成としています。 【ブランチ構成(ブランチ名)】<ul><li> 本番環境: <code>main</code></li><li>ステージ環境: <code>stg</code> </li><li>開発環境: <code>dev</code> </li></ul> また、各ブランチごとのデプロイ設定(「Site settings」→「Build &amp; deploy」→「Continuous deployment」→「Branches and deploy contexts」)が既にできていることを想定しています。 ※ これについては、本記事では紹介しません。 <h2 id="h23480f8425">完成形と設定手順</h2><h3 id="h1688017411">完成形</h3><img src="https://images.microcms-assets.io/assets/5c9f29838978428ebe46070ae4a793e5/f1a1d6e6f2714ad4945498bbf1c1cb17/v-q38wm37q2_1.png" alt=""><h3 id="hbce1f13925">設定手順</h3>1. Netlify(<a style="background-color:#fcf3db" href="https://app.netlify.com/" target="_blank" rel="noopener noreferrer">https://app.netlify.com/</a>)へアクセス&amp;ログインし、今回環境変数を追加する対象のサイトのダッシュボード画面を開く 2.「Site settings」→「Environment variables」をクリック 3. 「Add a variable」をクリック <img src="https://images.microcms-assets.io/assets/5c9f29838978428ebe46070ae4a793e5/227a240dc98f4f47800c7cfb43084dcf/v-q38wm37q2_3.png" alt=""> 4. 環境変数のキー名を「Key:」へ入力 5. 各ブランチごとに環境変数の値(Value)を入力するため、「Values」→「Different value for each deploy context」にチェック 6. 本番環境用の値を「Production」に入力 7. 開発環境用の値を「Branch deploys」に入力 8. ステージ環境用は「+ Add a branch value (optional)」→「Branch name」にステージ環境のブランチ名(例：stg)を入力 →「Value for branch」に値を入力 9. 最後に「Create variable」で追加 <img src="https://images.microcms-assets.io/assets/5c9f29838978428ebe46070ae4a793e5/f1a1d6e6f2714ad4945498bbf1c1cb17/v-q38wm37q2_1.png" alt=""> <h2 id="h6e881d2e49">設定する際の注意点</h2><h3 id="h2da9af9371">開発ブランチの環境変数の設定がうまくできなかった例</h3>1. 「+ Add a branch value (optional)」で、ステージ用(stg)と開発用(dev)をそれぞれ入力し、「Create variable」で追加しようとした 2. しかし、以下のエラーが出て、開発用(dev)の環境変数が設定できない エラー内容： 「dev is a reserved branch keyword (these include: production, deploy-preview, branch-deploy, dev, branch, main, master)」 <img src="https://images.microcms-assets.io/assets/5c9f29838978428ebe46070ae4a793e5/7dc965cb5a2b49c69e5c6c971e39fb0c/v-q38wm37q2_2.png.PNG" alt=""> <h3 id="hc4c05c18f9">解決策</h3>ブランチ名 <code>dev</code> の環境変数は「Branch Deploy」に入力する (ブランチ名 <code>dev</code> はNetlify側で予約されているワードであるため)</body></html>

本記事ではNetlifyを使って「本番・ステージ・開発ブランチごとに環境変数の値を設定＆設定する際の注意点」を紹介しています。設定する方法について、具体例を挙げながら紹介しています。

【Netlify】本番・ステージ・開発ブランチごとに環境変数の値を設定＆設定する際の注意点

<h2 id="hed900658dc">環境</h2><ul><li>Windows 11 Home</li><li>Go 1.20</li><li>Echo v3.3.10</li><li>Air v1.41.0(※Golangのホットリロードツール)</li><li>Docker Desktop v4.16.3</li></ul><h2 id="h7f506b9540">エラー</h2>Golangのホットリロードツールである「Air」のコマンド <code>air init</code> で初期設定ファイル .air.toml を自動で出力したあとに、 Docker経由( <code>docker-compose up</code> )で開始コマンド <code>air</code> を実行したところ、途中でエラーが出る。<ul><li>エラー内容(下記例: /bin/sh: 1: /go/src/app/tmpmain.exe: not found)</li></ul><pre><code>PS C:\Users\&lt;user_name&gt;\&lt;project_dir&gt;\golang-test&gt; docker-compose up
[+] Running 1/0
&nbsp;- Container golang-test-app-1&nbsp; Created&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;0.0s&nbsp;
Attaching to golang-test-app-1
golang-test-app-1&nbsp; |&nbsp;
golang-test-app-1&nbsp; |&nbsp; &nbsp;__&nbsp; &nbsp; _&nbsp; &nbsp;___
golang-test-app-1&nbsp; |&nbsp; / /\&nbsp; | | | |_)
golang-test-app-1&nbsp; | /_/--\ |_| |_| \_ , built with Go
golang-test-app-1&nbsp; |
golang-test-app-1&nbsp; | [23:56:56] watching .
golang-test-app-1&nbsp; | [23:56:56] !exclude tmp
golang-test-app-1&nbsp; | [23:56:56] building...
golang-test-app-1&nbsp; | [23:56:56] running...
golang-test-app-1&nbsp; | /bin/sh: 1: /go/src/app/tmpmain.exe: not found</code></pre> <h3 id="hcab7a2fe74">修正前</h3><ul><li>docker-compose.yml</li></ul><pre><code>version: '3'
services:
&nbsp; app:
&nbsp; &nbsp; build: .
&nbsp; &nbsp; volumes:
&nbsp; &nbsp; &nbsp; - ./:/go/src/app
&nbsp; &nbsp; ports:
&nbsp; &nbsp; &nbsp; - "8080:8080"</code></pre><ul><li>Dockerfile</li></ul><pre><code>FROM golang:1.20

ENV ROOT=/go/src/app
WORKDIR ${ROOT}

COPY . .
EXPOSE 8080

# Airをインストール → 実行
RUN go install github.com/cosmtrek/air@latest
CMD ["air"]</code></pre><ul><li>.air.toml</li></ul><pre><code>root = "."
testdata_dir = "testdata"
tmp_dir = "tmp"

[build]
&nbsp; args_bin = []
&nbsp; bin = "tmp\\main.exe"
&nbsp; cmd = "go build -o ./tmp/main.exe ."
&nbsp; delay = 0
&nbsp; exclude_dir = ["assets", "tmp", "vendor", "testdata"]
&nbsp; exclude_file = []
&nbsp; exclude_regex = ["_test.go"]
&nbsp; exclude_unchanged = false
&nbsp; follow_symlink = false
&nbsp; full_bin = ""
&nbsp; include_dir = []
&nbsp; include_ext = ["go", "tpl", "tmpl", "html"]
&nbsp; include_file = []
&nbsp; kill_delay = "0s"
&nbsp; log = "build-errors.log"
&nbsp; rerun = false
&nbsp; rerun_delay = 500
&nbsp; send_interrupt = false
&nbsp; stop_on_error = false

[color]
&nbsp; app = ""
&nbsp; build = "yellow"
&nbsp; main = "magenta"
&nbsp; runner = "green"
&nbsp; watcher = "cyan"

[log]
&nbsp; main_only = false
&nbsp; time = false

[misc]
&nbsp; clean_on_exit = false

[screen]
&nbsp; clear_on_rebuild = false
&nbsp; keep_scroll = true</code></pre> <h2 id="hc4c05c18f9">解決策</h2>.air.toml 内の <code>bin = "tmp\\main.exe"</code> を <code>bin = "tmp/main.exe"</code> に修正する。 <h3 id="hbac1cb0a86">修正後</h3><ul><li>.air.toml</li></ul><pre><code>root = "."
testdata_dir = "testdata"
tmp_dir = "tmp"

[build]
&nbsp; args_bin = []
&nbsp; bin = "tmp/main.exe" # ← ココ(修正箇所)
&nbsp; cmd = "go build -o ./tmp/main.exe ."
&nbsp; delay = 0
&nbsp; exclude_dir = ["assets", "tmp", "vendor", "testdata"]
&nbsp; exclude_file = []
&nbsp; exclude_regex = ["_test.go"]
&nbsp; exclude_unchanged = false
&nbsp; follow_symlink = false
&nbsp; full_bin = ""
&nbsp; include_dir = []
&nbsp; include_ext = ["go", "tpl", "tmpl", "html"]
&nbsp; include_file = []
&nbsp; kill_delay = "0s"
&nbsp; log = "build-errors.log"
&nbsp; rerun = false
&nbsp; rerun_delay = 500
&nbsp; send_interrupt = false
&nbsp; stop_on_error = false

[color]
&nbsp; app = ""
&nbsp; build = "yellow"
&nbsp; main = "magenta"
&nbsp; runner = "green"
&nbsp; watcher = "cyan"

[log]
&nbsp; main_only = false
&nbsp; time = true

[misc]
&nbsp; clean_on_exit = false

[screen]
&nbsp; clear_on_rebuild = false
&nbsp; keep_scroll = true</code></pre> <h2 id="h397e38daae">補足</h2>単純に、Windows系とUNIX系のパスの違い(<a style="background-color:#ffffff" href="https://wa3.i-3-i.info/word18271.html" target="_blank" rel="noopener noreferrer">参考</a>)が原因でした...(^-^;) 修正前の状態でも、Docker上ではなくWindowsのローカル上、つまり直接 <code>air</code> コマンドから実行すると当然エラーは出ません。 Macであれば、UNIX系のパス(bin = "tmp/main.exe")で .air.toml を出力してくれるため、特に修正は不要でした。

本記事ではGo言語とAir&Dockerでの「エラー `/bin/sh: 1: .../tmpmain.exe: not found﻿` の対処法」を紹介しています。対処する方法について、具体例を挙げながら紹介しています。

【Go】Air&Dockerでのエラー `/bin/sh: 1: .../tmpmain.exe: not found﻿` の対処法

こんにちは！かわいちです。 皆さんはReactとVSCodeでプログラミングするとき、スムーズにコーディング作業ができていますか？ 今回は開発の速度を上げるためのVSCodeの便利な機能、自動でimport＆未使用importの削除とソートについてまとめていきます。<h2 id="h4e06687cb6">使用しているもの</h2><ul><li>React</li><li>VisualStudioCode</li></ul><h2 id="had712a88cc">方法(全体の流れ)</h2>【手順】 1.VSCode「ファイル」→「ユーザー設定」→「設定」→アイコン「設定(JSON)を開く」→「settings.json」を開く <img src="https://images.microcms-assets.io/assets/5c9f29838978428ebe46070ae4a793e5/949f2d6ffa36416f9ba1f659a9b65bd2/ej-gewz8edl8_1.png" alt=""> 2.「settings.json」に以下のコードを追加し、上書き保存する。 (settings.json)<pre><code>{
 /*** ここから ***/
&nbsp; /* 保存時に実行するアクション */
&nbsp; "editor.codeActionsOnSave": {
&nbsp; &nbsp; /* import文の 自動追加 */
&nbsp; &nbsp; "source.addMissingImports": true,
&nbsp; &nbsp; /* import文の 自動未使用import削除 &amp; 自動アルファベット順ソート &amp; */
&nbsp; &nbsp; "source.organizeImports": true
&nbsp; },
 /*** ここまで ***/
 ...(省略)
}</code></pre>3.上書き保存後は、各ファイル内(.jsxや.tsxなど)で保存(Mac: ⌘+S, Windows: Ctrl+S)するたびに、自動でimport＆未使用importの削除とソートが実行されるようになる 【自動でimport&amp;未使用importの削除】 <img src="https://images.microcms-assets.io/assets/5c9f29838978428ebe46070ae4a793e5/a679b38fd290472d937cb4d72dbcb380/ej-gewz8edl8_movie_1.gif" alt=""> 【自動でソート】 <img src="https://images.microcms-assets.io/assets/5c9f29838978428ebe46070ae4a793e5/e4f836556f84498189d06cc49995cbe1/ej-gewz8edl8_movie_2_low.gif" alt=""> <h2 id="h860820fbb6">ソート機能の注意点</h2><ul><li>各<code>import</code> 文のあいだに空白行があるとうまくソートされません</li></ul><pre><code>/* NG× 以下のコードは空白行があるため、うまくソートされない */
import React from "react";
import { BChildComponent } from "./BChildComponent";

import { CChildComponent } from "./CChildComponent";

import { AChildComponent } from "./AChildComponent";</code></pre><ul><li>CSSファイルの<code>import</code> もソートしてくれますが、CSSの仕様上、あとから<code>import</code> したものが優先されるため、2つ以上のファイルで重複したスタイルがある場合、見た目が崩れる可能性があります。</li></ul><pre><code>import "./style1.css";
import "./style2.css"; // ← あとからimportしたスタイルが優先(上書き)される</code></pre><h2 id="h397e38daae">補足</h2>この機能は、named export と default export の両方に対応しています。 【named export】<pre><code>export const ChildComponent: React.FC = () =&gt; {
&nbsp; return &lt;div&gt;サンプルテキスト&lt;/div&gt;;
};</code></pre>【default export】<pre><code>const ChildComponent: React.FC = () =&gt; {
&nbsp; return &lt;div&gt;サンプルテキスト&lt;/div&gt;;
};
export default ChildComponent;</code></pre> <h2 id="h1afe451c43">さいごに</h2>コーディング中はできるだけ無駄なところに体力や頭を使いたくないですよね。 便利な機能はどんどん使って、快適なプログラミングライフを送りましょう！

本記事ではReactとVSCodeを使って「自動でimport＆未使用importの削除とソート」を紹介しています。使い方について、具体例を挙げながら紹介しています。

【Netlify】本番・ステージ・開発ブランチごとに環境変数の値を設定＆設定する際の注意点

前提

完成形と設定手順

完成形

設定手順

設定する際の注意点

開発ブランチの環境変数の設定がうまくできなかった例

解決策

自己紹介

かわいち

カテゴリー

タグ