Node, Vue, CapRover, Docker Swarm, self-hosted PaaS easy!
CapRover is a utility that can be installed on one or more servers and can deploy your dockers using swarm. It also offers functionality to install tools in one click, MongoDB, plex ... It manages the reverse proxy Nginx and https part with Lets'Encrypt. In this we will deliver our Node / Vue stack on it.
Why these tools? I will not attack this subject in detail today, to resume :
We can simply host services but sometimes we want to be able to manage scalability and deliver easily (ex : With a B2C, if the project becomes a success, a migration down due to overload can be fatal, affecting customer confidence).
The entry cost of services like google GKE, Heroku, is high for launches non-day zero remunerative projects (fyi : keep in mind that, when you launch a product, GKE + Cloud Atlas + Mailchimp + Whatever services, the bill goes up quickly ... we can reduce this as much as possible, at least in step 0. This will give more working comfort/quality as long as the performance of the product is not affected).
However, it's interesting to be able to manage all of this in setp 0, with docker and cloud mindset, to reduce the cost of migration later. Many solutions exist, many are abandoned. I suggest two today, Rancher or CapRover.
Here we will talk about CapRover, mainly because it seems to bee easier to use, but I hope to be able to test Rancher and make you an article afterward.
- one server (more difficult to test it on local with no IP exposed)
- one domain name (or subdomain).
Easy if you are familiar with docker :
docker run -p 80:80 -p 443:443 -p 3000:3000 -v /var/run/docker.sock:/var/run/docker.sock -v /captain:/captain caprover/caprover
two points of attention, 80 must be free and open, /captain must be ressources file sharing for docker.
Now you will have access to CapRover on http://yourserver:3000
- Open Apps section and click on One-Click App/Database
- Search and click on MongoDb
- Set configuration :
AppName : mongodb MongoDB Version: latest MongoDB RootUsername: admin MongoDB RootUsername: admin
- Click on Deploy
- Go back in Apps section, you will wee MongoDB up with one instance, and persistent Data, do not hesitate to click on it and explore to understand
For this step we will add our first custom App from scratch.
- Go in Apps section
- Add "Node" as name and click on Create New App
- Click on app created in Your Apps section
- Begin by Connect New Domain, in this example, we have added test.weareopensource.me which redirects on server IP
- Next, we define our Container HTTP Port as default it's 4200 for our Node Stack
- Switch on App Configs
We will Add Key/Value Par required for our Node stack:
//MongoDb url WAOS_NODE_db_uri: mongodb://srv-captain--mongodb //user WAOS_NODE_db_options_user: admin //pass WAOS_NODE_db_options_pass: admin //URL we will set for vue WAOS_NODE_cors_origin: ['http://...'] //classic node env NODE_ENV: production //required for docker container WAOS_NODE_host: 0.0.0.0
you can set Instance Count if you want
- Switch on Deployment
In this part you can set your method of deploy, for this example we will pull repo from Github directly.
- Focus on Method 3
- Set github information:
Repository: https://github.com/weareopensource/Node Branch: Master Username: your github email Password: your github password
- Click on Save & Update
- Then you can Force Build
- Normally you will see Buil Logs, then App Logs
Node should be up without errors:
And you will see a new versio hitory
we will do the same thing for Vue Stack.
- go in Apps section, and create a new app named Vue
- Follow this example configuration
- Http Settings
- App Configs
- Deployment same as Node part
You can now play with the different configurations, set up https with Lets'Encrypt and NetData. This is just an introduction, I let you discover and play with this tool :)