Creating and deploying Vue.js apps in the cloud
In this article we'll be looking at how you can start a new or deploy an existing Vue.js project to the cloud (Microsoft Azure) in literally under 1 minute.
If you already have a mogenius account, you can skip this step. Sign up for mogenius - it's free and you can get started right away. Once you're signed up, create a new cloudspace that contains all your services for a project, like Vue.js. The services all reside in your secure cloudspace and can communicate with each other (Kubernetes namespace isolation). This is a convenient way to build a cloud-native software project that consists of one or more interconnected microservices. Once you have confirmed your email and phone number, you can create a new cloudspace:
Choose a name for your cloudspace and select the free tier to get cloud resources at no charge, or you can also choose a subscription to upgrade your resources when you create the cloudspace or upgrade at a later stage.
Now are ready you to deploy Vue.js! On the next overview page, you will see all your cloudspaces. Click on the name of the cloudspace where you want to deploy your Vue.js application. On the next page, click "Service Library" in the left menu:
Now there are two options to get Vue.js deployed:
1 - Creating a new boilerplate template
Create a new project and mogenius will automatically create and setup a boilerplate Vue.js template in your Git repository. You can then start coding in the newly created repo or re-use existing code. Click on “Add Service” underneath the Vue.js logo on the next page.
If this is the first time you are deploying a service, we need to connect your cloudspace to your Github account. Click on “Connect Github” which will ask you to grant permission to access your Github repositories.
You will only need to do this once, your mogenius cloudspace is now connected to your GitHub account, and can access your repositories. Next, you can either use an existing empty repo or create a new one by clicking the “+” symbol. Select a name for the new repo and create it.
Select the branch in your repo and stage in your cloudspace you want to use. You can optionally add environment variables and change the resources like CPU cores, memory and persistent storage. By default we have pre-configured these for optimum and efficient usage of your resources
Now, simply click "Save". Your Vue.js boilerplate template will be built, added to the specified Git repository, and deployed to your cloudspace at the same time so you can start using it almost immediately. Once the setup routines, build and deployment process are complete (usually a few minutes at most), you can start coding and access your Vue.js at the specified URL. You can find all the details on your service's overview page, where you can also customize the resources and scale by adding additional instances for your service.
That’s it! You have created your Next.js service and it will be available to access by other services via the URL that has been assigned to your service, in this instance
2 – Deploying an existing Next.js app as Dockerfile
If you have already built your Next.js application, use an existing docker file or simply add a docker file to your repo. Select “Dockerfile” from the Service Library.
Now choose the repository with the Dockerfile in it from the dropdown menu.
Select the branch in your repository and the stage in your cloudspace that you want to use. Determine the port as specified in the Dockerfile. You can optionally add environment variables and change resources such as CPU cores, memory, and persistent storage that are required for your app to run.
Now just click "Save" and your Dockerfile will be deployed to your cloudspace and ready to use almost immediately. Once the setup routines, build and deployment processes are complete (usually a few minutes at most), you can start using your Next.js app at the URL provided. You can find all the details on your service overview page, where you can also customize and scale resources by adding additional instances for your service.
That’s it! You have created your Next.js service and it will be available to access by other services via the URL that has been assigned to your service, so you will have something like this: