tag:crieit.net,2005:https://crieit.net/tags/.env/feed Crieitでタグ「.env」に投稿された最近の記事 2022-07-14T23:32:07+09:00 https://crieit.net/tags/.env/feed tag:crieit.net,2005:PublicArticle/18238 2022-07-14T23:32:07+09:00 2022-07-14T23:32:07+09:00 https://crieit.net/posts/use-clipboard-api-by-react-20220714 <h2 id="経緯"><a href="#%E7%B5%8C%E7%B7%AF">経緯</a></h2> <ul> <li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/flu_bit/items/659a59260446117e9548">クリップボードにテキストをコピーするボタンの実装 - Qiita</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://mseeeen.msen.jp/copy-text-to-clipboard-with-javascript-in-2021/">JavaScript でクリップボードにテキストをコピーする (2021年版) | MSeeeeN | 大阪発 IT メディア by MSEN</a></li> </ul> <p>React アプリ(<code>create-react-app</code>(<code>react-scripts</code>))で Clipboard API を使おうとしたところ、次のエラーが発生してしまいました。</p> <blockquote> <p>Uncaught TypeError: Cannot read property ‘writeText’ of undefined ...</p> </blockquote> <ul> <li><a target="_blank" rel="nofollow noopener" href="https://owatata.com/2020/10/06/%E3%80%90javascript%E3%80%91navigator-clipboard-writetex%E3%81%A7-uncaught-typeerror-cannot-read-property-writetext-of-undefined/">【javascript】navigator.clipboard.writeTextで Uncaught TypeError: Cannot read property ‘writeText’ of undefined – オワタ太のブログ</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://propg.ee-mall.info/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0/javascript/js-http%E7%92%B0%E5%A2%83%E3%81%A7%E3%81%AFnavigator-clipboard-writetext%E3%81%8C%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%AB%E3%81%AA%E3%82%8B/">[JS] http環境ではnavigator.clipboard.writeTextがエラーになる - プロプログラマ -Flex,Air,C#,Oracle,HTML5+JS-</a></li> </ul> <p>調べてみたところ、 https でないと使用できないようです。</p> <p>そこで通常 <code>npm start</code> で自動起動してくる <code>http://localhost:3000/</code> を <code>https://localhost:3000/</code> にする必要に迫られたので、その方法を書き留めておきます。</p> <h2 id="対処"><a href="#%E5%AF%BE%E5%87%A6">対処</a></h2> <ul> <li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/sutara79/items/21a068494bc3a08a4803">XAMPP for WindowsでSSLを有効にする - Qiita</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://kdnakt.hatenablog.com/entry/2020/06/07/170000">Create React Appで作成したアプリをローカルのMacBook上でHTTPSで動作させる - kdnakt blog</a></li> </ul> <p>今回は XAMPP の入っているPCでそのオレオレSSL証明書が既にあったので、それを流用します。</p> <p>証明書を <code>server.crt</code>、 秘密鍵を <code>server.key</code> という名前でコピーして、 <code>create-react-app</code> プロジェクト配下に設置します(今回は <code>ssl/</code> ディレクトリを切りました)。</p> <p>次に、 <code>.env</code> に次の3行を足して再度 <code>npm start</code> します。</p> <pre><code>HTTPS=true SSL_CRT_FILE=./ssl/server.crt SSL_KEY_FILE=./ssl/server.key </code></pre> <p>これで <code>https://localhost:3000/</code> でアプリにアクセスでき、無事 Clipboard API も動かすことができました。</p> <h2 id="参考"><a href="#%E5%8F%82%E8%80%83">参考</a></h2> <h3 id="Clipboard API"><a href="#Clipboard+API">Clipboard API</a></h3> <ul> <li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/flu_bit/items/659a59260446117e9548">クリップボードにテキストをコピーするボタンの実装 - Qiita</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://mseeeen.msen.jp/copy-text-to-clipboard-with-javascript-in-2021/">JavaScript でクリップボードにテキストをコピーする (2021年版) | MSeeeeN | 大阪発 IT メディア by MSEN</a></li> </ul> <h3 id="Uncaught TypeError: Cannot read property ‘writeText’ of undefined"><a href="#Uncaught+TypeError%3A+Cannot+read+property+%E2%80%98writeText%E2%80%99+of+undefined">Uncaught TypeError: Cannot read property ‘writeText’ of undefined</a></h3> <ul> <li><a target="_blank" rel="nofollow noopener" href="https://owatata.com/2020/10/06/%E3%80%90javascript%E3%80%91navigator-clipboard-writetex%E3%81%A7-uncaught-typeerror-cannot-read-property-writetext-of-undefined/">【javascript】navigator.clipboard.writeTextで Uncaught TypeError: Cannot read property ‘writeText’ of undefined – オワタ太のブログ</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://propg.ee-mall.info/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0/javascript/js-http%E7%92%B0%E5%A2%83%E3%81%A7%E3%81%AFnavigator-clipboard-writetext%E3%81%8C%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%AB%E3%81%AA%E3%82%8B/">[JS] http環境ではnavigator.clipboard.writeTextがエラーになる - プロプログラマ -Flex,Air,C#,Oracle,HTML5+JS-</a></li> </ul> <h3 id="https化"><a href="#https%E5%8C%96">https化</a></h3> <ul> <li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/sutara79/items/21a068494bc3a08a4803">XAMPP for WindowsでSSLを有効にする - Qiita</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://kdnakt.hatenablog.com/entry/2020/06/07/170000">Create React Appで作成したアプリをローカルのMacBook上でHTTPSで動作させる - kdnakt blog</a></li> </ul> arm-band tag:crieit.net,2005:PublicArticle/18195 2022-05-23T23:58:56+09:00 2022-05-23T23:58:56+09:00 https://crieit.net/posts/docker-compose-change-enviroment-variables-file-20220523 <p>Docker Compose に渡す環境変数に .env 以外のファイルから渡したいと考えたのでメモしておきます。</p> <h2 id="経緯"><a href="#%E7%B5%8C%E7%B7%AF">経緯</a></h2> <p>アプリケーション開発環境等で開発環境用の <code>.development.env</code> と本番環境用の <code>.production.env</code> を用意したとして、この2つのどちらかから Docker Compose に環境変数を渡したい。</p> <p>開発環境なのでアプリ側で使用する環境変数と Dockerコンテナ 内で使用する環境変数を統一したい、と。</p> <p>ただし、デフォルトでは Docker Compose は <code>.env</code> からしか環境変数を読み取ってくれません。これをどうにかしたい。</p> <h2 id="コマンド"><a href="#%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89">コマンド</a></h2> <pre><code class="bash">> docker-compose --env-file .development.env up -d </code></pre> <p>ということでコマンドですが、 <code>docker-compose</code> コマンドに <code>--env-file</code> でパラメータを渡してあげると <code>.env</code> 以外のファイルも環境変数のソースとして渡すことができます。</p> <h2 id="(余談) コマンド実行時の --env-file パラメータと .envファイル と docker-compose.yml の env_file キー"><a href="#%28%E4%BD%99%E8%AB%87%29+%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E5%AE%9F%E8%A1%8C%E6%99%82%E3%81%AE+--env-file+%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%81%A8+.env%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB+%E3%81%A8+docker-compose.yml+%E3%81%AE+env_file+%E3%82%AD%E3%83%BC">(余談) コマンド実行時の --env-file パラメータと .envファイル と docker-compose.yml の env_file キー</a></h2> <p>さて、ここから少しややこしい話を。</p> <p>Docker Compose 周りでは環境変数関連で見出しに挙げた3つの方法があるようです。</p> <p><code>.env</code> については Docker Compose で使用できる環境変数ファイル。これは良いですね。</p> <p>この <code>.env</code> をそれ以外のファイル名・ディレクトリのファイルから読み取るように変更できるのが <code>docker-compose</code>コマンド 実行時の <code>--env-file</code> パラメータ。</p> <p>ここまでは <strong><code>docker-compose.yml</code> 内で使用できる</strong> 環境変数です。</p> <p>それでは最後、 <code>docker-compose.yml</code> の <code>env_file</code>キー は何か。</p> <pre><code>version: '3.7' services: db: env_file: - .dvelopment.env </code></pre> <p>最後の <code>env_file</code> は <code>docker-compose.yml</code> 内に記述できるパラメータで、これを使って環境変数のファイルを指定することができます。</p> <p>ただし、このパラメータで指定した環境変数は、 <strong>起動したコンテナ内からは参照できますが、 <code>docker-compose.yml</code> 内からは参照できません</strong>。</p> <p>ということで、今回やりたいこととはマッチしません。そもそもの目的が異なる、ということですね。</p> <p>過去の先人達のように自分も嵌まったのでこのことも併せてメモしておきます。</p> <h2 id="参考"><a href="#%E5%8F%82%E8%80%83">参考</a></h2> <ul> <li><a target="_blank" rel="nofollow noopener" href="https://zenn.dev/rhene/scraps/781fdbecd340d3">docker-composeで環境変数が読み込まれない?</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/SolKul/items/989727aeeafcae28ecf7">docker-composeのenv_fileと.envファイルの違い - Qiita</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://docs.docker.jp/compose/environment-variables.html">Compose における環境変数 — Docker-docs-ja 19.03 ドキュメント</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://docs.docker.com/compose/environment-variables/">Environment variables in Compose | Docker Documentation</a></li> </ul> arm-band