Running multiple apps with PM2 from same repo - nginx

Question

Some context:
I have a single repo (nuxt application) that is used to deploy to multiple apps/domains
all apps are on the same server
each app is in a separate folder with a clone of the repo, each folder is served on it's own domain (nginx)
each app has a different env file, the most important difference is a domain id (eg: DOMAIN_ID=1 etc..)
before build, I have a node script that does some setup work based on this DOMAIN_ID
I would like to use PM2 to:
use a single dir with the repo for all my domains
upon running pm2 deploy production I would like to be able to deploy all the domains, each domain should run it's setup script before doing the build
each domain should build in a subfolder so I can configure nginx to serve the app for a specific domain from it's folder
I tried to create an ecosystem file like so:
module.exports = {
apps: [
{
name: 'Demo1',
exec_mode: 'cluster',
instances: 'max',
script: './node_modules/nuxt/bin/nuxt.js',
args: 'start',
env: {
DOMAIN_ID: 1,
},
},
{
name: 'Demo2',
exec_mode: 'cluster',
instances: 'max',
script: './node_modules/nuxt/bin/nuxt.js',
args: 'start',
env: {
DOMAIN_ID: 2,
},
},
],
deploy: {
production: {
host: 'localhost',
user: 'root',
ref: 'origin/master',
repo: 'my_repo',
path: 'path_to_repo',
'post-setup': 'npm install && node setup.js',
'post-deploy': 'npm run build:setup && pm2 startOrRestart ecosystem.config.js --env production',
},
},
}
but it doesn't seem to work.
With the above ecosystem file the processes are created but when I access the domain for Demo1, pm2 serves randomly from Demo1 or Demo2 process.
There should be 2 dist folders somewhere, one for each of the apps.
I'm wondering if the above config is good and I'm just having an nginx issue or pm2 can't actually handle my use case.

Answer 1

To achieve what you're after, you'll need the following for each app:
A directory to serve your production build files from.
A node server instance, running on a unique port (eg. 3000, 3001).
A suitable nginx virtual host configuration for each app.
First, the build directories. The nuxt build script will look for a .nuxt.config.js and .env file in the srcDir (project root by default), produce the production build files for your app based on these files, and store the output at /.nuxt (again, by default). Passing the --config-file and --dotenv arguments to the nuxt build command allows you to point to different config and env files, thus enabling you to produce separate builds from a single repo.
Eg:
-- appRoot (the default srcDir, we'll change this in nuxt.config.js)
|__ node_modules
|__ package.json
|__ ...etc
|__ src
|__ commons
| |__ (shared configs, plugins, components, etc)
|__ app1
| |__ nuxt.config.js
| |__ ecosystem.config.js
| |__ .env
|__ app2
|__ nuxt.config.js
|__ ecosystem.config.js
|__ .env
For convenience, you could create the following scripts in package.json. To produce a build for app1, you run npm run app1:build.
"scripts": {
...
"app1:build": "nuxt build --config-file src/app1/nuxt.config.js --dotenv src/app1/.env",
"app2:build": "nuxt build --config-file src/app2/nuxt.config.js --dotenv src/app2/.env",
...
}
Now we're pointing our build scripts to individual app's nuxt.config.js files, we need to update those files and specify a srcDir and buildDir. The buildDir is where the output from each build command will be stored.
nuxt.config.js
...
srcDir: __dirname,
buildDir: '.nuxt/app1' (this path is relative to the project root)
...
That's it for building. For serving...
Each app needs a unique production server instance, running on it's own unique port. By default, nuxt start will launch a server listening on port 3000 and based on the nuxt.config.js file at the root of the project. As with the build command, we can pass arguments to change the default behaviour.
You could add the commands to package.json:
"scripts": {
...
"app1:build": "nuxt build --config-file src/app1/nuxt.config.js --dotenv src/app1/.env",
"app1:start": "nuxt start --config-file src/app1/nuxt.config.js --dotenv src/app1/.env -p=3000",
"app2:build": "nuxt build --config-file src/app2/nuxt.config.js --dotenv src/app2/.env",
"app2:start": "nuxt start --config-file src/app2/nuxt.config.js --dotenv src/app2/.env -p=3001",
...
}
By telling nuxt start to use app specific nuxt.config.jss, and having those point to unique buildDirs, we're telling our servers which directories to serve from for each app.
Important
Make sure when starting a production server you specify unique port numbers. Either add it to the start command (as above) or inside the nuxt.config.js file of each app.
Now you have unique builds, and unique server instances, you need to configure nginx to serve the correct app for each domain (I'm assuming you either know how to configure nginx to support virtual hosts, or someone on your team is handling it for you). Here's a stripped down config example:
server {
...
server_name app1.com;
root /path/to/appRoot;
...
location / {
...
proxy_pass http://localhost:3000;
...
}
...
}
Each app's nginx config can point to the same root- it's the proxy_pass that routes the request to the correct node server, which in turn knows which app to serve as we passed the appropriate arguments in with our nuxt start command.
PM2
I use PM2 to manage the node server instances, so a deployment script for the given example might look like:
Handle your version control/env files, and then...
cd /appRoot
npm install
npm run app1:build
pm2 reload src/app1/ecosystem.config.js
With app1's ecosystem.config.js files setup as so:
module.exports = {
apps: [
{
name: "app1",
exec_mode: "cluster",
instances: "max",
script: "./node_modules/nuxt/bin/nuxt.js",
args: "start --config-file src/app1/nuxt.config.js --dotenv src/app1/.env -p=3000"
}
]
}
Might need some tweaking to suit your needs, but I hope this helps!