Using ArvanCloud Cloud Container, you can deploy any application with any programming language or complexity on the cloud infrastructure.

Application deployment with this service is possible in three ways:

  • Direct conversion of your source code in GitHub or GitLab to an executable image (S2I)
  • Using the Dockerized format of your application or official DockerHub images
  • Creating Kubernetes manifest file for software deployment

This tutorial will use the S2I method and deploy a Vue.js front-end application on the cloud.

Implementing through S2I

Prerequisite:

  • Installing Nodejs
  • Installing a package manager like npm

Building the Application

The S2I or Source-to-image method takes the application’s source code as input and automatically generates a Docker image. Using this method, you can easily create an image of the desired program and deploy it on the cloud without knowing how to build containers.

Next, using Vue-CLI, we will create a simple Vue.js application and store it in a GitHub (or GitLab) repository. Then, using the repository link, we directly convert the program’s source code into an executable image.

We installed Vue-CLI using the following command:

First, we created a Vue app called hello-vue. Select default settings and npm package manager.

Using Vue-CLI is only for creating the files required by the project, and there is no need to use it. You can also use any other package manager (such as yarn).

Note: In the package.json file, we must change the alias run command used to run the program from serve to start.

After the application is built, we run it to make sure.

We went to localhost:8080 and tested the application:

Adding Buildpacks

One crucial step in deploying the application on the Cloud Container is specifying the required buildpacks. Buildpacks are a set of ready-made scripts used to identify the application’s techniques, compile the application’s source code, and release the final version of the application automatically.

For some popular languages ​​and technologies in the world (such as Python, Java, Node, Go, etc.), there are open-source buildpacks that can be used by everyone and are usually maintained and developed by the open-source community. ArvanCloud Container Service also uses these buildpacks to deploy the application on the cloud. In addition, any other custom buildpack can deploy the application on any cloud service.

Now that you are familiar with the concept of buildpack, we will add the buildpacks required for the Vue.js application to the project.

First, we create a .buildpacks file (without suffix) project in the root folder. In this file, we must write the URL address of the buildpacks required by the project separately in each line.

In most front-end applications that are Single-Page-Application or Static Site, we will need the following two buildpacks (Nodejs and static):

  • The Nodejs buildpack optimizes and minifies the project files for production mode and places them in a folder called dist.
  • The static buildpack is also used to serve the built files statically. Of course, the static buildpack must know precisely where these created files are located to serve them. Therefore, it is necessary to add a new file called static.json to the root of the project and write the following configuration for the Vue app (source link):

Another way to serve project files is to use a web server like express. We no longer need the static buildpack and the static.json file in this case. Instead, we need a server.js configuration file to define the server.

First, we install express and serve-static packages.

Then we define the express server configuration as follows:

Finally, we change the production execution order in package.json as follows:

Saving the Project in the Git Repository

In the last step before the deployment stage, create a GitHub repository (or Gitlab) and push the project to the remote repository.

Application deployment on the cloud

Up to this point, we have done all the work required before deploying the application. Next, we deploy our application on the cloud infrastructure using the ArvanCloud container.

In the Cloud Container panel, we create a new application using Git:

For this project, we choose GitHub software as Source Control:

As you can see in the picture above, in the ArvanCloud Container Service, we can use various technologies such as Scala, Ruby, Go, Node, Java, Python, etc.

In the first step, we have to give permission to the desired git software to access the project repository:

After specifying the access, the list of GitHub repositories can be seen in the panel. By selecting the desired branch and repository, the technology used in the application is automatically recognized. Also, with the Auto Deploy feature, we can automatically deploy the new version for each new update of the program (push to the repository):

In the next step, we must choose the name of the application:

In the required resources section, we set the resources you need to run the application without problems. In this project, it is enough to consider the resources specified in the image because we have made a straightforward app. After building the application and during its development process, these resources can be changed.

In the configuration section, we can define runtime and build time variables.

In the next step, we choose a free subdomain or a custom domain for the application:

By choosing a custom domain, we can use our defined domains in ArvanCloud CDN:

And finally, after reviewing the bill, we create the application.

After creating the application, you can see all the steps of building and deploying the application in the Build Log by clicking on the icon next to the application name.

Also, by clicking on the application name, you can see the runtime logs in the build tab.

After some time, the application becomes active, and we can access the application using the subdomain that we defined in advance.

We can see that the application is correctly deployed on the cloud container.

If the application is not built successfully, you can check the reason for the application not being deployed in the log tab.