title: deploy React and Django with Nginx and Docker
body: <p>I'm trying to deploy my React build and Django API using Nginx and Docker. I'm still really new to deployment and have never hosted a website that would go into production so am a little at a loss.</p>
  <p>Right now I have my Django API run on port 8000 and the React app runs on port 3000. I'm hoping to use Nginx to direct the IP address to the React app or Django API depending on the URL.</p>
  <p>Some examples:</p>
  <ul>
  <li><a href="http://10.2.5.250/" rel="nofollow noreferrer">http://10.2.5.250/</a>: would serve the React build at port 3000</li>
  <li><a href="http://10.2.5.250/upload" rel="nofollow noreferrer">http://10.2.5.250/upload</a>: would serve the Django template file index.html at port 8000</li>
  <li><a href="http://10.2.5.250/median-rent?table=MedianRent" rel="nofollow noreferrer">http://10.2.5.250/median-rent?table=MedianRent</a>: would serve the Django api at port 8000</li>
  </ul>
  <hr />
  <p>This is my project structure:</p>
  <pre><code>.
  ├── docker-compose.yml
  ├── front-end
  │   ├── Dockerfile
  │   ├── README.md
  │   ├── debug.log
  │   ├── node_modules
  │   ├── package-lock.json
  │   ├── package.json
  │   ├── public
  │   ├── src
  │   └── yarn.lock
  ├── housing_dashboard_project
  │   └── housing_dashboard
  │       ├── Dockerfile
  │       ├── dashboard_app
  │       │   ├── admin.py
  │       │   ├── apps.py
  │       │   ├── migrations
  │       │   ├── models.py
  │       │   ├── serializers.py
  │       │   ├── static
  │       │   ├── templates
  │       │   │   └── dashboard_app
  │       │   │       └── index.html
  │       │   ├── urls.py
  │       │   └── views.py
  │       ├── data
  │       ├── db.sqlite3
  │       ├── entrypoint.sh
  │       ├── importer
  │       ├── manage.py
  ├── nginx
  </code></pre>
  <p>These are my docker files for serving React and Django in debugging and development build:</p>
  <p><em>docker-compose.yml</em></p>
  <pre><code>version: '3'
  
  services:
    django:
      build: ./housing_dashboard_project/housing_dashboard
      command: [&quot;python&quot;, &quot;manage.py&quot;, &quot;runserver&quot;, &quot;0.0.0.0:8000&quot;]
      volumes:
        - ./housing_dashboard_project/housing_dashboard:/housing_dashboard_project/housing_dashboard
      ports:
        - &quot;8000:8000&quot;
  
    frontend:
      build: ./front-end
      command: [&quot;npm&quot;, &quot;start&quot;]
      volumes:
        - ./front-end:/app/front-end
        - node-modules:/app/front-end/node_modules
      ports:
        - &quot;3000:3000&quot;
  
  volumes:
    node-modules:
  </code></pre>
  <p><em>Dockerfile</em> in <em>front-end</em> folder</p>
  <pre><code>FROM node
  
  WORKDIR /app/front-end
  COPY package.json /app/front-end
  
  RUN npm install
  
  EXPOSE 3000
  CMD [&quot;npm&quot;, &quot;start&quot;]
  </code></pre>
  <p><em>Dockerfile</em> in <em>housing_dashboard_project/housing_dashboard</em></p>
  <pre><code>FROM python:latest
  
  RUN apt-get update \
      &amp;&amp; rm -rf /var/lib/apt/lists/*
  
  WORKDIR /housing_dashboard_project/housing_dashboard
  COPY requirements.txt /housing_dashboard_project/housing_dashboard
  RUN pip install -r requirements.txt
  
  EXPOSE 8000
  #CMD [&quot;python&quot;, &quot;manage.py&quot;, &quot;runserver&quot;, &quot;0.0.0.0:8000&quot;]
  ENTRYPOINT [&quot;sh&quot;, &quot;entrypoint.sh&quot;]
  </code></pre>
  <p><em>entrypoint.sh</em> in <em>housing_dashboard_project/housing_dashboard</em></p>
  <pre><code>#!/bin/sh
  
  python3 manage.py flush --no-input
  python3 manage.py makemigrations
  python3 manage.py migrate
  
  python3 manage.py collectstatic --no-input --clear
  
  exec &quot;$@&quot;
  </code></pre>