How I deployed my Nuxt app on a rasberry pi

I've recently purchased a rasberry pi to pratice my network and linux skills.
I decided to install apache2 and try making available my own Nuxt app on the web ! (some of you guys knows how much I like using Nuxt)

Disclaimer : ⚠️
I may say things that are "wrong" (not best practices), I only have 2 years experience and this project is for fun so if you notice something wrong, write it down it the comment section. Thank's

Setting up the environement 🛠️

First we need some essential tools.

• Git
• pm2
• Apache2 (obviously)
• nodejs
• npm
• curl

let's run some commands to install eveything ! 👨‍💻

$ sudo apt update

# install apache http server
$ sudo apt install apache2

# install node and npm
$ sudo apt install curl software-properties-common
$ curl -sL https://deb.nodesource.com/setup_12.x | sudo bash -

# install git
$ sudo apt install git 

# install pm2 globally
$ npm install pm2 -g

Then you should see Apache default page when requesting localhost (or 127.0.0.1) on any web browser. 👍

Good ! now we only want to change this default page with our beatiful Nuxt js website !

Building the website 🏗️

This is were git is going to be usefull.

I'm not going to explain how I build my Nuxt app (it's still pretty empty), because this is not the point of this post.

But you just need to know it's on GitHub, so we can use git to download and install it on my server (rasberry).

$ cd /var/www
$ git clone 'our-git-repo'
$ cd 'our-git-repo'
$ npm install
# Build your application with webpack and minify the JS & CSS (for production).
$ npm run build

Apache configuration ⚙️

Now that we have apache up and running and our nuxt app, we just need to connect both of them.

Create a new virtual host

# enable proxy http module
$ sudo a2enmode proxy proxy_http
# creating our new site
$ cd /etc/apache2/sites-available/
$ sudo vi our-site-name.conf

<VirtualHost *:80>
    ServerName www.our-domaine.com
    #ServerAdmin webmaster@localhost
    DocumentRoot /var/www/OUR-DIRECTORY-NAME

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

        # has Nuxt runs on port 3000
    ProxyPass / http://localhost:3000/
    ProxyPassReverse / http://localhost:3000/
</VirtualHost>
# :wq to save and exit

Now we have told apache to deliver our nuxt app on http request.

Enable the new site and disable the default one

We just need to replace apache default page with our site.

# enable our nuxt site
$ sudo a2ensite our-site-name.conf
# disable apache default page
$ sudo a2disite 000-default.conf
#reload apache service
$ sudo systemctl reload apache2

And were good to go !👏

Start Nuxt server 🏁

Now you will probably think we only need to open the web browser to see our Nuxt app, but we need one more step.

Because Nuxt use Server side rendering, we need to start the node.js server with npm start.

Pm2 will be perfect for that purpose !

$ cd /var/www/our-directory-name
$ pm2 start 'npm start' --name "NUXT APP"
$ pm2 save

Cool ! Our node.js server is started and will be reloaded by pm2 if it turns off.

# optional : to start the node.js server on startup
$ pm2 startup
# then run the command in output

Requesting localhost should show our beatiful Nuxt app.
We did it ! 🎉

Open our APP on the web 🌐

We just need to configure our router to open 80 (and 443 if ssl/tls is configured), and forward to the server (rasberry pi).
Fortunalty my IAP provides a web interface to do so.

Requesting our domain name or our router ip address show the Nuxt app has well.

Tips for rasberry : you can open port 22 to control your rasberry with ssh from outside your local network

Conclusion 🎇

It was such a good training to deploy this on my rasberry pi !
I really wasn't shure it will handle it.