Deploy a website to the cloud in 4 commands in IDE

Good day! I think everyone who started their journey in web development wanted to host their work. This time we will try to deploy a one-page site as quickly as possible using the Flask library.

This article is created for beginners who can simply copy the code and publish the site in “two clicks”.

So, let's move on to deployment!

Preparing the site for deployment

Since we will be using Flask, the simple connection of js, images and styles will have to be replaced with a slightly more frightening script using url_for(). This is done simply and template-wise. Here is an example:

The connection of the js/jquery-3.3.1.min.js script initially looks like this:

<script src="https://habr.com/ru/companies/amvera/articles/833482/static/js/jquery-3.3.1.min.js"></script>

Now, to connect the script with Flask, we change the line a little:

<script src="https://habr.com/ru/companies/amvera/articles/833482/{{ url_for("static',filename="js/jquery-3.3.1.min.js") }}"></script>

What have we added here? In the double curly braces is a call to the url_for() function, which is how we tell Flask that we need to include it. The first argument ('static') will be the folder where static files are stored. Static files are the same styles, scripts and other files that we include in the page. The second argument will be the path relative to the static folder. In our case – 'js/jquery-3.3.1.min.js'.

With the connection of styles and images it is literally the same.

Code

Now that the site is ready, you can start writing the code. As the title of the article says, it will be very small.

Let's create a file main.pyin which all the code will be written.

This is what the contents look like main.py:

from flask import Flask, render_template  
  
app = Flask(__name__, template_folder=".")  
  
@app.route("/")  
def web():  
return render_template('index.html')  
  
if __name__ == "__main__":  
app.run(debug=True, host="0.0.0.0", port="80")

From Flask we import the Flask class and the render_template function, with which we will render the page.

After the imports comes the declaration of app – it is passed to the class name and necessarily the folder in which the template itself is located (index.html). In our case, the template is in the same folder as the script, so we enter the period.

The app.route decorator is used to bind a function to a url. “/” means the main home page of the site. The function inside the decorator returns the render of the page.

Inside the structure if name == "main" the server startup is located app.run(). Here we pass debug=True, which allows us to see an error directly on the page, host=“0.0.0.0” and port=“80”. These two arguments are needed for the application to work correctly on the server.

Creating a dependency file

Don't forget about the dependency file – requirements.txt. It is needed to install Python libraries on the server.

It is done simply – all the names of libraries and their versions are written into it, for example:

библиотека==версия  
библиотека2==версия2

We register Flask, which is used in the code:

Flask==3.0.3

Registration and deployment to the server

We will deploy the project in the cloud. Amvera.

Why I chose this one Amvera:

When registering on the service, you receive a free promo balance of 111 rubles.
Updates via git (or by uploading via the interface). Even without git knowledge, you can quickly deliver updated code to the repository via the command line or terminal in the IDE.
Money does not burn out if you do not use the service.
And yes, I work there…

Once all the code is ready to deploy, we can finally register on the service and proceed to creating a project.

After entering all the data, you will need to confirm your phone number. This is what will give you free 111 rubles on your balance 🙂

Have you registered? Now you can proceed to the final stage – creating a project. On the projects page, click the “Create” button. In the window, enter the project name, select the “Application” type and any tariff you like. Click next.

In the data upload window, you can either choose the upload method via git or the site interface. I will choose and show the method via git, but even after this choice, you can use both methods.

Configuration – here we need to select certain settings. Namely:

When additional sections appear, in the version we set 3.12 or any other that supports Flask 3.0.3, in the run section and the scriptName parameter we write main.py (or another name of the main script you choose). Click “Finish”. Now the last step is loading the data.

Uploading project files via Git

You can use the site interface and upload files in the “Repository” tab using the “Upload data” button. But for clarity, I will show how to work with Git.

Naturally, if you have never used git, you need to install it.

Once git is installed, you can start by initializing git: open a terminal in the project folder and enter the command git initIf a .git file is created, then everything was successful.

Now I will show an explicit sequence of commands for connecting a remote repository, adding files, the first commit and push:

Let's connect the remote: git remote add amvera https://git.amvera.ru/имя-пользователя/название-проекта-транслитом. This command along with the url is specified in the “Repository” tab under the inscription “Or connect to an existing repository”. After this command, a window will open asking you to enter the username and password of the Amvera user.

Let's add all the files to the local repository: git add .
Let's make the first commit: git commit -m "Первый коммит"
Let's push to the remote repository (necessarily to the master branch): git push amvera master

Perhaps, if you have previously added any file through the interface, this will occur error “failed to push some refs to…”. In this case, you need to run the command git pull amvera master

After the push, the project will be built automatically. All we have to do is activate the default domain name in the “Settings” tab by setting the switch, which is located under the “Actions” text in the list of domain names, to the “on” position. You can also add your own domain name.

We wait for the end of the build and the launch of the application. When the application status becomes “Application launched” – we can safely follow the previously activated link and check the operation of the site!

Summary

The first time, of course, it may all seem complicated and long, but once you figure it out, deployment will become a very simple task! If you correctly set the configuration from a couple of parameters and specified dependencies, you will need only three commands in the terminal to update the project.