Deploy Nuxt.js app using Apache 2

 

Deploy your dynamic Nuxt.js app

Nuxt.js is an amazing server side rendering application framework for Vue.js. In this article we will see how to deploy Nuxt.js application to AWS instance in universal app mode. Where in Nuxt.js you can choose between Universal, Static Generated or Single Page application.

Before we start deploying our dynamic app, if you want just to deploy a static website, you can run this command:

npm run generate

and it will generate the files and put them in dist folder which you can upload to any server you want. But this will not work for universal apps.

1. Build your app

To build a ssr app you need to run the following command:

npm run build

The generated files will not be in the dist folder as for the static app, but you can find all generated files in .nuxt folder which will be the entry point.

2. Upload to the server

There are two ways to do this upload your whole application with the source code or just upload the needed files. If you don't like to upload your whole app, you can use any SFTP app and upload the .nuxt folder generated in the previous step also static folder with nuxt.config.js and package.json files and any folder the app needs to run correctly.

Of course you can upload your whole app using git where on your production server you can run the build command and generate all the needed files. Read this article Deploy your app to AWS instance using Git to push your app using git to your production server.

3. Install app packages

Now your app is on your production server, before we continue make sure that you have a new Node.js version installed so you can run your Nuxt.js app

node --version

Install all the packages your app needs.

npm install

4. Run your app

Before we run our application we need to build it. As we pushed the whole app to the production server.

npm run build

Now we can start our app.

npm run start

Our app is running on the localhost:3000 but actually we want it to run on port 80. To do this we need to use Apache or Nginx web server.

5. Configure Apache

As said our app is running on port 3000 what we want is to run it on port 80. To do this we will use reverse proxy so that port 80 can listen to the internal port 3000. Open Apache configuration file and write the following,

<VirtualHost *:80>
.........
Proxy /.well-knowm/ !
ProxyPass / http://127.0.0.1:3000/
ProxyPassReverse / http://127.0.0.1:3000/
ProxyPreserveHost On
.........
</VirtualHost>

Go a head and restart the server.

sudo service httpd restart

One more thing we want to do is we want our app to run forever even if the AWS instance reboots at any time. What we will do is to go back to our application folder and install pm2.

npm install pm2 -g

-g is to install pm2 globally. Now we want pm2 to start our app.

pm2 start npm -- start

This will run on background and start our application at any time our instance reboots.