Vue.js is a free and open-source JavaScript model–view front end framework for creating user interfaces and single-page applications. Vue is usually used for single page web applications that run on the client side.
Vue can still be used to create a full-stack web application in conjunction with other backend technologies such as Node.js and Flask. This is accomplished by sending HTTP queries to a server and displaying the results in a Vue-based interface.
Coming to the backend, Flask is a Python-based micro web framework. It is characterized as a micro-framework since it does not necessitate the usage of any specific tools or libraries. It lacks a database abstraction layer, form validation, and other components where third-party libraries offer common functionalities.
In this tutorial we will deploy a Flask application with Vue.js frontend on PATR through a docker image.
Pre-Requisites
To complete this tutorial, we will need the following things set up:
<ul>
<li>
Code Editor (VS Code, Notepad++, Sublime, Pycharm, Idle etc.)
</li>
<li>
You need to have the latest version of Python installed on your device, if you don't have that or are about to install it, you can refer to it <a href="https://www.geeksforgeeks.org/download-and-install-python-3-latest-version/">here</a>.
</li>
<li>
Docker.
</li>
<li>
A Good internet connection.
</li>
<li>
<a href="https://patr.cloud/">PATR</a> of course.
</li>
</ul>
Step 1: Getting your Repo and Code ready:
For this tutorial I'm assuming you already have a flask code ready for production, if you don't have it in production mode you can try referring to this <a href="https://faun.pub/deploy-flask-app-with-nginx-using-gunicorn-7fda4f50066a">link</a>. If you don't have any code at all, then you can use this <a href="https://github.com/ethanchewy/PythonBuddy">repository</a>.
Step 2: Dockerizing your code:
Up to this point you've been working with Flask's built-in development web server. Now that you have a ready-to-deploy web application, it's time to build the project to run the app in Docker with a more powerful web server capable of handling production traffic.
The bundled flask development server is usually preferred for testing purposes on your local PC, whereas the Python HTTP server Gunicorn is more powerful and made to handle production-level traffic. All dynamic files will be handled by it. We'll use Nginx as a reverse proxy to serve static files, as it's a general-purpose HTTP server.
Setting up the programme on a standard server would be difficult; as we'd have to install and set up Python and Nginx, then open the proper firewall ports. Docker eliminates all of this effort by generating a single image that contains all of the necessary files and services. The image we'll make is compatible with any Docker-enabled system.
Wsgi entry point file
We first have to create an entry point for our flask application. This will let the Gunicorn server know how to interact with the application.
<pre><code>cd PythonBuddy
nano ~/src/wsgi.py
</code></pre>
Now we can import the flask instance and then run it:
<pre><code>from app import app

if __name__ == "__main__":
 app.run()
</code></pre>
Installing Docker
Docker's portability is one of its main advantages, and it can be installed on a wide range of operating systems.
Install Docker Desktop on Windows and OSX. Docker is generally available in all major Linux distributions. You can refer <a href="https://www.toolsqa.com/docker/install-docker/">this link</a> for details.
Writing the Dockerfile
The following steps are for including a Dockerfile in your project. This allows Docker to produce the image that will run on the Docker Machine you just made.
To brush up, a Dockerfile is simple to create and contains many elements that can be reused and/or obtained online. Docker comes with a lot of the tools which you can use to create your image. Dockerfiles offer the flexibility to personalize your project. A Dockerfile's structure can be thought of as a set of instructions for creating your container/image. The majority of Dockerfiles, for example, will start by referencing a Docker base image. This is usually a pure vanilla image of the most recent Ubuntu release or other Linux OS of choice. You can configure directory structures, environment variables, download dependencies, and a variety of other basic system activities before eventually running the process that will operate your web application.
<ol>
<li>
Create an empty file named Dockerfile at the root of your project to begin the Dockerfile.
</li>
<li>
Then, in the Dockerfile, add the first line that specifies which base image to use. You may make your own base image and use it for your containers, which can come in handy if you work in a department with many teams who would need to deploy their apps in the same way.
</li>
<li>
We'll create the Dockerfile in the root of our project, and move one directory up.
</li>
</ol>
<pre><code>cd /"directory where you have cloned the repository"/PythonBuddy
</code></pre>
<ol start="4">
<li>
Make a new file with the name nginx.default. This will be our nginx setup.
</li>
<li>
On port 5000, we'll listen for connections, serve static files from the <code>PythonBuddy/static</code> directory, and redirect the remainder to port 5000, where Gunicorn will be listening:
</li>
</ol>
<pre><code># nginx.default

server {
 listen 5000;

 location / {
 proxy_pass http://127.0.0.1:5000;
 proxy_set_header Host $host;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 }
 location /static {
 root /app/PythonBuddy;
 }
}
</code></pre>
<ol start="6">
<li>Create a server startup script called <code>gunicorn\_starter.sh</code> in the root folder. This is a Bash script that starts Gunicorn and Nginx:</li>
</ol>
<pre><code>#!/usr/bin/env bash
cd PythonBuddy
gunicorn --bind 0.0.0.0:5000 wsgi:app
nginx -g "daemon off;"
</code></pre>
<ol start="7">
<li>
In the first line we go into the PythonBuddy directory inside the root folder and run the gunicorn command with the arguments IP address and port and the WSGI pointing to the app. The file declares the application variable, and Gunicorn interprets how to communicate with the object to start the webserver.
</li>
<li>
The programme is then performed with two flags: bind to connect the running server to port <code>5000</code>, which will be used to communicate with the operating web server over HTTP. More information about Gunicorn setup can be found in their documentation.
</li>
<li>
Make the script executable:
</li>
</ol>
<pre><code>#!/usr/bin/env bash
cd PythonBuddy
gunicorn --bind 0.0.0.0:5000 wsgi:app
nginx -g "daemon off;"
</code></pre>
<ol start="10">
<li>Create the Dockerfile:</li>
</ol>
<pre><code># Dockerfile

FROM python:3.9-buster
</code></pre>
It's worth mentioning that we're utilizing a base image designed particularly for Python 3.9 apps, as well as a set of instructions that execute before the rest of your Dockerfile. The source files and scripts must now be copied inside the container using the COPY command and setting the work directory to app directory.
<ol start="11">
<li>Then we will install all the requirements using the RUN command:</li>
</ol>
<pre><code>COPY . /app
WORKDIR /app
RUN pip install -r requirements.txt
</code></pre>
<ol start="12">
<li>Next, add the Nginx installation commands and COPY the configuration file inside the container:</li>
</ol>
<pre><code># install nginx
RUN apt-get update &#x26;&#x26; apt-get install nginx vim -y --no-install-recommends

COPY nginx.default /etc/nginx/sites-available/default

RUN ln -sf /dev/stdout /var/log/nginx/access.log \
 &#x26;&#x26; ln -sf /dev/stderr /var/log/nginx/error.log
</code></pre>
<ol start="13">
<li>The server will be accessible on port <code>5000</code>. As a result, you must configure your container to enable access to this port in order to connect with your operating server through HTTP. To do this, use the EXPOSE command to open the port.</li>
</ol>
<pre><code>start server
EXPOSE 5000
STOPSIGNAL SIGTERM
CMD ["./gunicorn_starter.sh"]
</code></pre>
<ol start="14">
<li>The final step in your Dockerfile is to run the start script you added earlier, which will start your web server on port <code>5000</code> and listen for HTTP requests. The CMD directive can be used to run this script.</li>
</ol>
After you've set everything up, your final Dockerfile should look like this:
<pre><code># Dockerfile

FROM python:3.9-buster

COPY . /app
WORKDIR /app
RUN pip install -r requirements.txt

# install nginx
RUN apt-get update &#x26;&#x26; apt-get install nginx vim -y --no-install-recommends
COPY nginx.default /etc/nginx/sites-available/default
RUN ln -sf /dev/stdout /var/log/nginx/access.log \
 &#x26;&#x26; ln -sf /dev/stderr /var/log/nginx/error.log

# start server
EXPOSE 5000
STOPSIGNAL SIGTERM
CMD ["./gunicorn_starter.sh"]
</code></pre>
You are now ready to build the container image, and then run it to see it all work together.
Building and Running the Container
Once you have Docker installed on your PC, creating the container is simple. The command below will seek for your Dockerfile and download all of the layers required to execute your container image. It will then execute the commands in the Dockerfile, leaving you with a container that is ready to use.
Use the docker build command to create your container and give it a name or tag so you can refer to it later when you want to start it. The command's final component informs Docker which directory to build in.
<pre><code>docker build -t pythonbuddy .
</code></pre>
In the output, you can see Docker processing each one of your commands before outputting that the build of the container is complete. It will give you a unique ID for the container, which can also be used in commands alongside the tag.
The final step is to run the container you have just built using Docker:
<pre><code>docker run -it -p 5500:5000 pythonbuddy
[2022-05-31 12:33:50 +0000] [8] [INFO] Starting gunicorn 20.1.0
[2022-05-31 12:33:50 +0000] [8] [INFO] Listening at: http://0.0.0.0:5000 (8)
[2022-05-31 12:33:50 +0000] [8] [INFO] Using worker: sync
[2022-05-31 12:33:50 +0000] [9] [INFO] Booting worker with pid: 9
</code></pre>
The command tells Docker to run the container and forward the exposed port <code>5000</code> to port <code>5000</code> on your local machine. With <code>-e</code> we set environment variables that automatically create an admin user.
After you run this command, you should be able to visit <a href="http://localhost:8020/">http://localhost:8020</a>.
Step 3: Signing up on PATR:
This is a fairly easy step, just head on the app.patr.cloud, create a new account.
<img src="/static/images/blogs/blogs/common-images/sign-up.webp" alt="">
Fill in your details on the sign-up form. An email will be sent to your registered email address with an OTP. Use that password to complete the sign-up process.
Step 4: Create a Docker Repository:
When you create an account on PATR, you automatically get a secure, private docker registry by default. All you need to do is create a repository.
After signing in navigate to the Docker Registry tab:
<img src="/static/images/blogs/blogs/common-images/sidebar-docker-repo.webp" alt="">
<img src="/static/images/blogs/blogs/common-images/create-docker-repo-button.webp" alt="">
Give your new Docker repository a name of your choice, once you are done, hit Create Repository.
Your new docker repository will show up on your list of repositories.
You can click on each repository to get information about it:
Step 5: Create a Deployment
Let's start creating a deployment on PATR; you'll soon realize how easy it is to deploy on PATR. A deployment is merely a container running on a server. All you need to do is provide the docker image, and mention where you want to run it. The rest will be taken care of by PATR. Your container will be up and running in no time.
<ol>
<li>Navigate to the Deployments tab on PATR and click on New Deployment:</li>
</ol>
<img src="/static/images/blogs/blogs/common-images/sidebar-deployment.webp" alt="">
<img src="/static/images/blogs/blogs/common-images/create-deployment-button.webp" alt="">
<ol start="2">
<li>Fill in the following details accordingly:</li>
</ol>
<ul>
<li>
Name: The name of your deployment. This is something you would use to identify the deployment for your internal purposes.
</li>
<li>
Registry: Specify which registry you want to pull the image from. Currently, we only allow pulling the image from our internal registry, meanwhile we are working on allowing other registries as well.
</li>
<li>
Repository: This is the docker repository containing the image you want to deploy. From the dropdown select the repository that you just created.
</li>
<li>
Image Tag: Mention the tag of the image to be deployed, from the repository that you chose. As a default, pick latest, unless you want to push an image with a different name.
</li>
<li>
Region: Choose a region which is closest to your users. This will determine the latency of your application.
</li>
</ul>
Click on the Next Step:
<ul>
<li>Ports: This is the port you want your app to be exposed to, in this case it's 8020.</li>
<li>Environment Variables: List the environment variables that are being used in your application with a proper key and value, in this case it should look like the image below:</li>
</ul>
Click on Next Step:
<ul>
<li>Deploy Options: You can tick one or both of the options in the checkbox</li>
</ul>
Deploy on push means the deployment will be created as soon as you push to docker repository.
Deploy on create will deploy as soon as the deployment is created.
If you don't check either you have to do it by clicking on start button manually.
<ul>
<li>Horizontal Scale: This specifies the number of instances of your image you want running. These will be automatically load-balanced.</li>
<li>Machine Type and Cloud Providers: This specifies the RAM and CPU specifications of the machine that's going to run your docker container. PATR supports AWS as well as Digital Ocean, PATR is currently working on adding support for more cloud providers.</li>
</ul>
Click on Create Deployment.
Your new deployment will now be created with the image and tag you had mentioned but will have the status as created. This is because you actually haven't pushed any image to the registry, for it to deploy.
Step 6: Pushing an Image
Now that we have a deployment, let's push an image to it to run it.
You need to install the Docker CLI from this <a href="https://docs.docker.com/engine/install/">link</a>.
Once you have docker installed, from your terminal, type the following:
“docker login registry.patr.cloud”
You will be asked for a username and password. Use the same credentials you had used to sign up for PATR.
Now, let's take an image you have locally and push it (this tutorial assumes your local image is tagged as (demo: latest)).
On the website, you'll find a button to copy the full image details of the deployment you just created, next to the delete button. This button will copy the full image name, plus tag of the repository to push to, which will trigger the deployment.
Now that you have the full image details copied, let's re-tag your local image:
Docker tag {your repository name} {part repository URL}
Now that your image is retagged, you can now push it:
Docker push {part repository URL}
Now the deployment will automatically get deployed.
Once the image is pushed, Patr will detect the push, recognize the deployment that corresponds to the given image name and tag, and will automatically deploy it. The status will change from created, to pushed, to deploying and finally to running. You can click on the Manage Deployment button to view more details of your deployment.
By default, your deployment will be assigned a randomly-generated URL that you can use to access it. You can access your deployment by using the following URL format - {your-port}-{deployment-id}.patr.cloud where your-port is the one that you mentioned while creating deployment and the deployment-id is the randomly generated unique id that will be in your address bar.
You can also view the deployment logs, change the environment variables, update the domain, etc. You can also push another image to the same image name and tag and the deployment will automatically get updated.
Ant that's it, you're done deploying your Flask application!

How to Deploy a Vue app with a Flask backend on PATR?

How to Deploy a Vue app with a Flask backend on PATR?

Patr takes care of everything, so you can focus on what really matters.

Patr takes care of everything,
so you can focus on what really matters.