Create a Docker Container for Production Environment

Requirements

• An Elastic Path Commerce development environment
• An Elastic Path training virtual machine

Prerequisites

Ensure that you are familiar with the following third-party technologies:

• Git
• Yarn
• Node.js
• Visual Studio Code

Example

1. Clone or pull the react-pwa-reference-storefront repository into your directory.
2. Navigate to the react-pwa-reference-storefront directory.
3. Add custom configurations to the Docker file, Docker compose file, and Nginx configuration file, if any. For this example we will update the skuImagesUrl configuration to point to a different URL in production.
   • Provide any custom configurations to pass into your Docker container at runtime. In the src/ep.config/json file, replace the values of any parameter with a custom configuration value.
     • For example, in the src/ep.config.json file, set the skuImagesUrl parameter to NGINX_REPLACE_SKUIMAGESURL.
   • Provide any custom configurations you would like passed into your Docker container at runtime directly below the existing RUN jq command. One has been provided to you as an example.
     • For example, in the ./docker/prod/Dockerfile file, add the following line directly below the existing RUN jq command to populate the parameter at build time with the environment variable: RUN jq -e '.cortexApi.scope|="NGINX_REPLACE_SKUIMAGESURL"' ./src/ep.config.json > ./src/ep.config.json.tmp && cp ./src/ep.config.json.tmp ./src/ep.config.json Note: Use the jq syntax for the command. For more information, see the jq manual. Ensure that you add the NGINX_REPLACE_ prefix for the custom configurations
   • Update the ./docker/prod/nginx.conf file with the new configuration by adding a new sub_filter statement within the configuration block below the existing configuration. Use a generic value, which is used for the environment variable in the next step, for the configuration.
     • Example: sub_filter "NGINX_REPLACE_SKUIMAGESURL" "${SKUIMAGESURL}";
   • In the ./docker/prod/docker-compose.yaml file, add the environment configuration variable within the environment block and set a value to add in the container.
     • Example: SKUIMAGESURL: $SKUIMAGESURL
4. Build a production Docker image by running the following command: docker build -t ep-store -f ./docker/prod/Dockerfile .
5. Push the ep-store image to the Docker repository.
6. Navigate to the docker/prod/ directory.
7. Copy the following files to the user home directory on the remote host:
   • docker-compose.yaml
   • nginx.conf
8. In the docker-compose.yaml file, update the following parameters:

Environment Configuration	Value
$DOCKER_REPO	ep-store
$CORTEX_URL	The Cortex server URL
$DOMAIN	The domain name without http://
$SSL_CERT_PATH	The certificate file path in the remote server. For example, /etc/letsencrypt/live/reference.elasticpath.com/fullchain.pem.
$SSL_KEY_PATH	The path of the private key in the remote server. For example, /etc/letsencrypt/live/reference.elasticpath.com/privkey.pem.Note: You can use the certificate generated by any certificate provider, such as Let’s Encrypt.
$CORTEX_API_SCOPE	The name of the store from which Cortex retrieves data
$SKUIMAGESURL	The URL that consists of the path to catalog images hosted on an external CMS (Content Management System). This is your new custom configuration

To start the Docker container created for the Docker image, run the following Docker command: docker-compose up -d