作成反応するアプリは、ドッキングウィンドウ-compose.yml

Question

version: "3" 
services: 
    web: 
    # replace username/repo:tag with your name and image details 
    image: user1/webapp:latest 
    volumes: 
     - ./local-db:/go/src/webapp/local-db 
    environment: 
     - REACT_APP_ENDPOINT=http://api.com 
    deploy: 
     replicas: 5 
     resources: 
     limits: 
      cpus: "0.1" 
      memory: 50M 
     restart_policy: 
     condition: on-failure 
    ports: 
     - "8080:8080" 
    networks: 
     - webnet 
networks: 
    webnet: 

webappから環境変数を読んでいないが作成反応するアプリを提供していますサーバーですが、私はhttps://daveceddia.com/multiple-environments-with-react/ に応じ

console.log("process.env.REACT_APP_ENDPOINT") 
console.log(process.env.REACT_APP_ENDPOINT) 

を実行したときに、私はする必要があります環境変数にアクセスすることができます。私は

docker swarm init 
docker stack deploy -c ~/webapp/docker-compose.yml webapp 

コンソールログを印刷undefinedを使用してドッキングウィンドウ-コンを実行しますが、私はドッキングウィンドウなしで私のローカルマシン上に作成反応するアプリを提供するサーバーを実行した場合、フロントエンドは、適切に環境変数を出力します。

Answer 1

Create React Appは.envファイルをサポートしています。つまり、これらのファイルのいずれかに永続的な環境変数を設定して、アプリケーションで利用できるようになります。

あなたはdocker-compose.ymlにあなたを入れています。

これを処理する解決策があります： https://github.com/facebookincubator/create-react-app/issues/982#issuecomment-273032553

具体的には、ステップ＃3。

Answer 2

私は多くの人々はこれで苦労気づいた、とENVを渡すために、特にどのようDockerfileに条件付きのスクリプトの代わりにvarsは、私は単純化のGithubレポチュートリアル提供：

- 経由https://github.com/mikesparr/tutorial-react-docker

背景LinkedInの記事に公共の記事あなたが読むことを気にしている場合：

からhttps://www.linkedin.com/pulse/dockerizing-your-react-app-mike-sparr/

---

要するに、buildとserver startのステップを実行するスクリプトを実行するには、DockerファイルCMDが必要です。そのため、アプリケーションはランタイムコンテナのコンフィグを使用できます。

また、エンベロープの末尾にREACT_APP_<yourvarname>を付ける必要があります。アプリ内でprocess.env.REACT_APP_SOMEVARを使用して参照する必要があります。