The final step to making Barely SMS ready for production deployment is removing the React development server from the UI service. The development server was never intended for production use because it has many parts that aid developers, but ultimately slow down the overall user experience and have no place in a production environment.

Instead of using a Node.js based image, you can use a simple NGINX HTTP server that serves static content. Since this is a production environment and you don't need a development server that builds UI assets on the fly, you can just use the create-react-app build script to build your static artifacts for NGINX to serve:

npm run build

Then, you can change the Dockerfile.ui file so that it looks like this:

FROM nginx:alpine 
EXPOSE 3000 
COPY nginx.conf /etc/nginx/nginx.conf 
COPY build /data/www 
CMD ["nginx", "-g", "daemon off;"] 

This time, the image is basic on an NGINX server that serves static content, and we're passing it a nginx.conf file. Here's what this looks like:

worker_processes 2; 
 
events { 
  worker_connections 2048; 
} 
 
http { 
  upstream service_api { 
    server api:3001; 
  } 
 
  server { 
    location / { 
      root /data/www; 
      try_files $uri /index.html; 
    } 
 
    location /api { 
      proxy_pass http://service_api; 
    } 
  } 
} 

Here you have a fine-grained level of control over where HTTP requests are sent. For example, if the /api/login and /api/logout endpoints were moved to their own service, you could control this change here rather than having to rebuild the UI image.

The last change that's required to be done is to docker-compose.yml:

api: 
  image: barely-sms-api 
  expose: 
    - 3001 
  ports: 
    - "3001:3001" 
 
ui: 
  image: barely-sms-ui 
  expose: 
    - 80 
  links: 
    - api 
  ports: 
    - "3000:80" 

Did you notice that port 3000 now maps to port 80 in the ui service? This is because NGINX serves on port 80. If you run docker-compose up, you should be able to visit http://localhost:3000/ and interact with your static build.

Congratulations! With no more React development server, you're just about as ready for production as you can be from a build tool perspective.