Implementing Django and Vue – Building a Social Network with Django and Vue 3 | Part 15

In this tutorial series, we have covered the development of a social network using Django and Vue. Now, we will walk you through deploying the application so that it can be accessed by users on the internet. We will cover the steps required to deploy both the Django backend and the Vue frontend on a cloud server.

Before we start, make sure you have the necessary tools and accounts:

1. A cloud server (such as AWS, DigitalOcean, or Heroku) with root access
2. An SSH client (such as PuTTY or Terminal)
3. Docker installed on the server
4. Docker Compose installed on the server
5. Git installed on the server

Now, let’s get started:

1. Prepare the Django backend:
   First, clone the Django backend repository to your server using Git:

   git clone <repository-url>

2. Prepare the Vue frontend:
   Next, clone the Vue frontend repository to your server using Git:

   git clone <repository-url>

3. Configure Django settings:
   Update the Django settings file to include the production settings, such as the database credentials, allowed hosts, and static files settings.

4. Build the Vue frontend:
   Navigate to the Vue frontend directory and build the production version of the frontend:

   npm install
   npm run build

5. Create a Dockerfile for the Django backend:
   Create a Dockerfile in the root directory of the Django backend to define the environment for running the Django application:

   
   FROM python:3.9

ENV PYTHONUNBUFFERED 1

WORKDIR /app

COPY requirements.txt .

RUN pip install -r requirements.txt

COPY . .

EXPOSE 8000

CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]

6. Create a Dockerfile for the Vue frontend:
Create a Dockerfile in the root directory of the Vue frontend to define the environment for running the Vue application:

FROM node:14

WORKDIR /app

COPY package.json .

RUN npm install

COPY . .

EXPOSE 8080

CMD ["npm", "run", "serve"]

7. Create a docker-compose.yml file:
Create a docker-compose.yml file in the root directory to define the services and their configurations:

version: ‘3’

services:
backend:
build: .
ports:

• "8000:8000"
  frontend:
  build: .
  ports:
• "8080:8080"

1. Build and run the Docker containers:
   Build and run the Docker containers using Docker Compose:

   docker-compose up -d

2. Access the application:
   You can now access the deployed application using the IP address or domain name of your cloud server. The Django backend should be running on port 8000, and the Vue frontend should be running on port 8080.

That’s it! You have successfully deployed the Django and Vue social network application on a cloud server. Users can now access the application on the internet and interact with each other. Thank you for following along with this tutorial series. If you have any questions or run into any issues, feel free to reach out for help. Happy coding!