From 45c3adb6fdfed5c191d8a14562eaabbd54c5c91b Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Tue, 27 Oct 2020 23:08:12 +0100 Subject: Split prod and dev config for Docker Compose This change splits the Docker Compose configuration into three files in order to share the configuration for different environments (e.g. development and production). Furthermore, this change drops the requirement for a reverse proxy. --- README.md | 9 ++++----- docker-compose.override.yml | 31 +++++++++++++++++++++++++++++++ docker-compose.prod.yml | 14 ++++++++++++++ docker-compose.yml | 28 +--------------------------- frontend/.dockerignore | 1 + frontend/nginx.conf | 17 ----------------- frontend/src/api/routes/token-signin.js | 10 +++++----- frontend/src/api/socket.js | 6 ++++-- 8 files changed, 60 insertions(+), 56 deletions(-) create mode 100644 docker-compose.override.yml create mode 100644 docker-compose.prod.yml create mode 100644 frontend/.dockerignore diff --git a/README.md b/README.md index a7d5d13b..25169ca7 100644 --- a/README.md +++ b/README.md @@ -45,7 +45,7 @@ The simulator monitors the database for `QUEUED` scenarios, and simulates them a The official way to run OpenDC is using Docker. Other options include building and running locally, and building and running to deploy on a server. -For all of these options, you have to create a Google API Console project and client ID, which the OpenDC frontend and web server will use to authenticate users and requests. Follow [these steps](https://developers.google.com/identity/sign-in/web/sign-in) to make such a project. In the 'Authorized JavaScript origins' and 'Authorized redirect URI' fields, be sure to add `http://localhost:8081` and `https://localhost:3000`. Download the JSON of the OAuth 2.0 client ID you created from the Credentials tab, and specifically note the `client_id`, which you'll need to build OpenDC. +For all of these options, you have to create a Google API Console project and client ID, which the OpenDC frontend and web server will use to authenticate users and requests. Follow [these steps](https://developers.google.com/identity/sign-in/web/sign-in) to make such a project. In the 'Authorized JavaScript origins' and 'Authorized redirect URI' fields, be sure to add `http://localhost:8080`, `http://localhost:8081` and `https://localhost:3000`. Download the JSON of the OAuth 2.0 client ID you created from the Credentials tab, and specifically note the `client_id`, which you'll need to build OpenDC. ### Installing Docker @@ -57,7 +57,7 @@ Users of Windows 10 Home and previous editions of Windows can use [Docker Toolbo _Skip this if you have GNU/Linux, Mac OS X and Windows 10 Professional._ -Open VirtualBox, navigate to the settings of your default docker VM, and go to the 'Network' tab. There, hidden in the 'Advanced' panel, is the 'Port forwarding' feature, where you can set a rule for exposing a port of the VM to the host OS. Add one from guest IP `10.0.2.15` to host IP `127.0.0.1`, both on port `8081`. This enables you to open a browser on your host OS and navigate to `http://localhost:8081`, once the server is running. +Open VirtualBox, navigate to the settings of your default docker VM, and go to the 'Network' tab. There, hidden in the 'Advanced' panel, is the 'Port forwarding' feature, where you can set a rule for exposing a port of the VM to the host OS. Add one from guest IP `10.0.2.15` to host IP `127.0.0.1`, both on port `8080` and `8081`. This enables you to open a browser on your host OS and navigate to `http://localhost:8080`, once the server is running. ### Running OpenDC @@ -82,8 +82,7 @@ OPENDC_DB_USERNAME=opendc OPENDC_DB_PASSWORD=opendcpassword OPENDC_FLASK_SECRET="This is a secret flask key, please change" OPENDC_OAUTH_CLIENT_ID=your-google-oauth-client-id -OPENDC_ROOT_DIR=/your/path/to/opendc -OPENDC_SERVER_BASE_URL=http://localhost:8081 +OPENDC_API_BASE_URL=http://localhost:8081 ``` We provide a list of default traces for you to experiment with. If you want to add others, place them in the `traces` directory and add entries to the database (see also [the database folder](database/mongo-init-opendc-db.sh)) @@ -100,4 +99,4 @@ docker-compose build docker-compose up ``` -Wait a few seconds and open `http://localhost:8081` in your browser to use OpenDC. We recommend Google Chrome for the best development experience. +Wait a few seconds and open `http://localhost:8080` in your browser to use OpenDC. We recommend Google Chrome for the best development experience. diff --git a/docker-compose.override.yml b/docker-compose.override.yml new file mode 100644 index 00000000..8c822c98 --- /dev/null +++ b/docker-compose.override.yml @@ -0,0 +1,31 @@ +version: "3.8" + +# Docker Compose overrides for development environments +services: + frontend: + build: + args: + OPENDC_API_BASE_URL: http://localhost:8081 + ports: + - "8080:80" + + api: + ports: + - "8081:8081" + + mongo: + ports: + - "27017:27017" + + mongo-express: + image: mongo-express + restart: on-failure + networks: + - backend + depends_on: + - mongo + ports: + - "8082:8081" + environment: + ME_CONFIG_MONGODB_ADMINUSERNAME: "${MONGO_INITDB_ROOT_USERNAME}" + ME_CONFIG_MONGODB_ADMINPASSWORD: "${MONGO_INITDB_ROOT_PASSWORD}" diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml new file mode 100644 index 00000000..63166967 --- /dev/null +++ b/docker-compose.prod.yml @@ -0,0 +1,14 @@ +version: "3.8" + +# Docker Compose overrides for production environments +services: + frontend: + build: + args: + OPENDC_API_BASE_URL: ${OPENDC_API_BASE_URL} + ports: + - "8080:80" + + api: + ports: + - "8081:8081" diff --git a/docker-compose.yml b/docker-compose.yml index 25e7ee8f..4d62b7cd 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -4,24 +4,16 @@ services: build: context: ./frontend args: - - OPENDC_OAUTH_CLIENT_ID=${OPENDC_OAUTH_CLIENT_ID} - - OPENDC_API_BASE_URL=${OPENDC_SERVER_BASE_URL} + OPENDC_OAUTH_CLIENT_ID: ${OPENDC_OAUTH_CLIENT_ID} image: frontend restart: on-failure networks: - backend - depends_on: - - api - ports: - - "8081:80" api: build: ./api image: api restart: on-failure - # Comment out these 2 lines for deployment - ports: - - "8082:8081" networks: - backend depends_on: @@ -36,8 +28,6 @@ services: - OPENDC_DB_HOST=mongo - OPENDC_FLASK_SECRET - OPENDC_OAUTH_CLIENT_ID - - OPENDC_ROOT_DIR - - OPENDC_SERVER_BASE_URL simulator: build: ./simulator @@ -74,25 +64,9 @@ services: - OPENDC_DB_PASSWORD networks: - backend - # Comment out for public deployment - ports: - - "27017:27017" volumes: - mongo-volume:/data/db - mongo-express: - image: mongo-express - restart: on-failure - networks: - - backend - depends_on: - - mongo - ports: - - "8083:8081" - environment: - ME_CONFIG_MONGODB_ADMINUSERNAME: "${MONGO_INITDB_ROOT_USERNAME}" - ME_CONFIG_MONGODB_ADMINPASSWORD: "${MONGO_INITDB_ROOT_PASSWORD}" - volumes: mongo-volume: results-volume: diff --git a/frontend/.dockerignore b/frontend/.dockerignore new file mode 100644 index 00000000..3c3629e6 --- /dev/null +++ b/frontend/.dockerignore @@ -0,0 +1 @@ +node_modules diff --git a/frontend/nginx.conf b/frontend/nginx.conf index ed7e5cfe..1b4e3a73 100644 --- a/frontend/nginx.conf +++ b/frontend/nginx.conf @@ -8,23 +8,6 @@ server { try_files $uri $uri/ /index.html; } - location /socket.io { - proxy_http_version 1.1; - - proxy_buffering off; - proxy_set_header Upgrade $http_upgrade; - proxy_set_header Connection "Upgrade"; - proxy_pass http://api:8081/socket.io; - } - - location /tokensignin { - proxy_pass http://api:8081/tokensignin; - } - - location /api { - proxy_pass http://api:8081/api; - } - error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; diff --git a/frontend/src/api/routes/token-signin.js b/frontend/src/api/routes/token-signin.js index 577f4723..d6cff570 100644 --- a/frontend/src/api/routes/token-signin.js +++ b/frontend/src/api/routes/token-signin.js @@ -1,10 +1,10 @@ export function performTokenSignIn(token) { const apiUrl = process.env.REACT_APP_API_BASE_URL || '' - const data = new FormData() - data.append('idtoken', token) - return fetch(`https://${apiUrl}/tokensignin`, { + return fetch(`${apiUrl}/tokensignin`, { method: 'POST', - body: data, - }) + body: new URLSearchParams({ + idtoken: token, + }), + }).then((res) => res.json()) } diff --git a/frontend/src/api/socket.js b/frontend/src/api/socket.js index 6974d5eb..1c432167 100644 --- a/frontend/src/api/socket.js +++ b/frontend/src/api/socket.js @@ -6,9 +6,11 @@ let requestIdCounter = 0 const callbacks = {} export function setupSocketConnection(onConnect) { - const apiUrl = process.env.REACT_APP_API_BASE_URL || window.location.hostname + ':' + window.location.port + const apiUrl = + process.env.REACT_APP_API_BASE_URL || + `${window.location.protocol}//${window.location.hostname}:${window.location.port}` - socket = io.connect(window.location.protocol + '//' + apiUrl) + socket = io.connect(apiUrl) socket.on('connect', onConnect) socket.on('response', onSocketResponse) } -- cgit v1.2.3