Example of deployment process which I use in my Nuxt.js projects. I usually have 3 components running per project: admin-panel SPA, nuxt.js renderer and JSON API.
This manual is relevant for VPS such as DigitalOcean.com or Vultr.com. It's easier to use things like Now for deployment but for most cases VPS gives more flexebillity needed for projects bigger than a landing page.
UPD: This manual now compatible with email@example.com. For older versions deployment, see revision history.
Let's assume that you have entered fresh installation of Ubuntu instance via SSH. Let's rock:
Depending on size of project you have two options: make non-root user or go on with root. I'd suggest you to go with root, which is easier (except nginx part). If you have chosen non-root, check out this tutorial.
Using nvm or directly:
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - sudo apt-get install -y nodejs
It's actually up to you, depending on type of your project, but I usually use this structure:
- user dir (ex., /root)
- config.yml (pm2 config)
- app (project name)
- client (nuxt.js files)
- server (API server files)
- public (static content)
Fill server dir with your API code, in my case it's nodejs + koa2 + mongoose stack. Place at least favicon and robots.txt to public dir.
4.Upload nuxt.js bundle.
If you use enviroment variables (I hope you are), open package.json file and change build script to
"build": "NODE_ENV=production nuxt build",
On production build, node.js will pass production flag to your nuxt.config.js. For example, you can make API URL different for dev and prod enviroments and more. Very usefull. (for Windows users, see cross-env package).
Now it's time to make production build. Run
npm run build on your local machine. I don't recommend to build nuxt.js on production server, because it eats lots of memory and causes up to minute of downtime. Take package.json, nuxt.config.js and .nuxt dir and copy them via sftp (or pull from git) to client dir.
Note that there is special Nuxt package for running production renderer without useless overhead -
nuxt-start. Intall it as dependency with same version as your Nuxt package. Move to your client directory on the server and install production dependencies (in most cases you only need nuxt-start package):
npm i -—production.
5.Set up PM2
PM2 is a process manager for node.js. Install PM2 and create config file in your user root dir: config.yml. See config example below. Don't forget to run
pm2 save && pm2 startup, so your processes will recover on server restart.
6.Set up Nginx
sudo apt-get update sudo apt-get install nginx
(If you use root user, you have to set right permissions for project dirs to make it work with static files. Or just change
user: www-data to
user: root in /etc/nginx/nginx.conf.)
Then edit config file /etc/nginx/sites-available/default, see config example below. Don't forget to
sudo nginx -s reload after every nginx config modification.
If you have already connected domain to your project, it's super easy to set up https (and http2). See this tutorial for installing certbot.
7.Fire it up!
Move to dir that contains your pm2 config file and run
pm2 start config.yml –-env production. Yay, everything should work now, but it doesn't. Run
pm2 logs to see errors. This manual is complicated for a newbie and imperfect itself, so you will probably have to try several times. But it's worth it.
Contributions to this manual are appreciated.