Use pm2 with nextjs in docker image - docker

I have a docker image that I am trying to use pm2 on. For some reason I am getting a 404 error if I run it with the following command in my dockerfile. Am I calling this correctly?
CMD ["node_modules/.bin/pm2-runtime", "node_modules/.bin/next", "start"]
Thanks in advance!

I was able to figure this out. I added an ecosystem.config.js, added ENV to point to node_modules in my Dockerfile
COPY ecosystem.config.js ./
ENV PATH=/app/node_modules/.bin:$PATH
CMD ["pm2-runtime", "start", "ecosystem.config.js"]
ecosystem.config.js
module.exports = {
apps: [
{
name: 'app-name',
script: 'yarn start',
},
],
};
and it started working

Related

Cant run jest puppeteer automation on docker image

I have jest automation with puppeteer that needs to run as a docker container. but after the build when I try to run it. I get this error Error: Jest: Got error running globalSetup - /usr/src/app/node_modules/jest-environment-puppeteer/setup.js, reason: Failed to launch the browser process! /usr/src/app/node_modules/puppeteer/.local-chromium/linux-884014/chrome-linux/chrome: error while loading shared libraries: libxshmfence.so.1: cannot open shared object file: No such file or directory
I'm quit new for the docker stuff not sure what I'm doing wrong here
jest.config.ts
module.exports = {
setupFiles:['dotenv/config'],
preset: "jest-puppeteer",
roots: ['<rootDir>/src'],
transform: {
'^.+\\.tsx?$': 'ts-jest'
},
testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
}
jest-puppeteer.config.js
module.exports = {
launch: {
headless: true, //Specify whether to launch UI
defaultViewport: null,
args: ['--start-maximized', '--disable-gpu',
'--disable-dev-shm-usage', '--disable-setuid-sandbox',
'--no-sandbox'],
},
testEnvironmentOptions: { resources: 'usable' },
};
Dockerfile
FROM node:16.14.0
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
RUN chown -R node /usr/src/app
USER node
CMD npm run test
I installed chrome separately into docker and tried to run it but that didn't work.
I use this docker image and it fixed the issue
https://hub.docker.com/r/alekzonder/puppeteer/

Vue Vite cannot connect to docker container

Hi I have install fresh app vue3 typescript + vite , my problem after building the image and spin the container. I cannot access the localhost:3000, the browser will just display
The connection was reset
docker run --rm -it -v %cd%/:/app/src -p 3000:3000 myvitets
Dockerfile
FROM node:14-buster-slim
# make the 'app' folder the current working directory
WORKDIR /app
# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./
RUN npm install
# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .
EXPOSE 3000
CMD [ "npm", "run", "dev"]
I also add .dockerignore
node_modules/
.git
.gitignore
can someone help me please how to run my app to the container..
Thank you in advance.
I had the same problem and the below works for me.
In package.json, change the scripts
From
"dev": "vite"
To
"dev": "vite --host 0.0.0.0"
First: in the package.json add --host tag
"scripts": {
"dev": "vite --host",
"build": "vite build",
"preview": "vite preview --port 4173",
"test:unit": "vitest --environment jsdom"
},
Second: in the vite.config.js add the server port
// https://vitejs.dev/config/
export default defineConfig({
server: {
port: 3000
},
plugins: [vue()],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
the port should be the same as in the Dockerfile, in your case 3000

Hot reload in Vue does not work inside a Docker container

I was trying to dockerize my existing simple vue app , following on this tutorial from vue webpage https://v2.vuejs.org/v2/cookbook/dockerize-vuejs-app.html. I successfully created the image and the container. My problem is that when I edit my code like "hello world" in App.vue it will not automatically update or what they called this hot reload ? or should I migrate to the latest Vue so that it will work ?
docker run -it --name=mynicevue -p 8080:8080 mynicevue/app
FROM node:lts-alpine
# install simple http server for serving static content
RUN npm install -g http-server
# make the 'app' folder the current working directory
WORKDIR /app
# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./
# install project dependencies
RUN npm install
# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .
# build app for production with minification
# RUN npm run build
EXPOSE 8080
CMD [ "http-server", "serve" ]
EDIT:
Still no luck. I comment out the npm run build. I set up also vue.config.js and add this code
module.exports = {
devServer: {
watchOptions: {
ignored: /node_modules/,
aggregateTimeout: 300,
poll: 1000,
},
}
};
then I run the container like this
`docker run -it --name=mynicevue -v %cd%:/app -p 8080:8080 mynicevue/app
when the app launches to browser I get this error in terminal and the browser is whitescreen
"GET /" Error (404): "Not found"
Can someone help me please of my Dockerfile what is wrong or missing so that I can play my vue app using docker ?
Thank you in advance.
Okay I tried your project in my local and here's how you do it.
Dockerfile
FROM node:lts-alpine
# bind your app to the gateway IP
ENV HOST=0.0.0.0
# make the 'app' folder the current working directory
WORKDIR /app
# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./
# install project dependencies
RUN npm install
# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .
EXPOSE 8080
ENTRYPOINT [ "npm", "run", "dev" ]
Use this command to run the docker image after you build it:
docker run -v ${PWD}/src:/app/src -p 8080:8080 -d mynicevue/app
Explanation
It seems that Vue is expecting your app to be bound to your gateway IP when it is served from within a container. Hence ENV HOST=0.0.0.0 inside the Dockerfile.
You need to mount your src directory to the running container's /app/src directory so that the changes in your local filesystem directly reflects and visible in the container itself.
The way in Vue to watch for the file changes is using npm run dev, hence ENTRYPOINT [ "npm", "run", "dev" ] in Dockerfile
if you tried previous answers and still doesn't work , try adding watch:{usePolling: true} to vite.config.js file
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
host: true,
port: 4173,
watch: {
usePolling: true
}
}
})

pm2-runtime ecosystem npm script fail

****Google Translator used****
I don't know why "ecosystem.config.js" is still included in npm agrs ...
So in the "ecosystem.config.js" file, args only has run and start, but when you build a docker, it looks like it works with npm ecosystem.config.js run start.
Please tell me why
// dockerfile
FROM node:lts-alpine
RUN npm install pm2 -g
COPY . /usr/src/nuxt/
WORKDIR /usr/src/nuxt/
RUN npm install
EXPOSE 8080
RUN npm run build
# start the app
CMD ["pm2-runtime", "ecosystem.config.js"]
// ecosystem.config.js
module.exports = {
apps: [
{
name: 'webapp',
exec_mode: 'cluster',
instances: 2,
script: 'npm',
args: ['run', 'start'],
env: {
HOST: '0.0.0.0',
PORT: 8080
},
autorestart: true,
max_memory_restart: '1G'
}
]
}
I struggled with ecosystem.config.js, I ended up using the yaml format instead: create process.yaml and enter your config>
apps:
- script: /app/index.js
name: 'app'
instances: 2
error_file: ./errors.log
exec_mode: cluster
env:
NODE_ENV: production
PORT: 12345
Then in the docker file:
COPY ./dist/index.js /app/
COPY process.yaml /app/
COPY docker-entrypoint.sh /usr/local/bin/
ENTRYPOINT ["docker-entrypoint.sh"]
# Expose the listening port of your app
EXPOSE 12345
CMD [ "pm2-runtime", "/app/process.yaml"]
Just change the directories and files to the way you want things setup

VueJs docker image not loading in the browser

QUESTION: (edited: solution is added at the end of this post)
I have VueJS project (developed in webpack), which I want to docker-size.
My Dockerfile looks like:
FROM node:8.11.1 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 8080
CMD ["npm", "run", "dev"]
which is basically following the flow from this post.
I also have a .dockerignore file, where I copied the same files from my .gitignore and it looks like:
.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
.git/
I have created a docker image with the command:
docker build -t test/my-image-name .
and then run it into a container with the command:
docker run -it -p 8080:8080 --rm --name my-container-name test/my-image-name
as a result of this last command, I got the same output in the terminal (which is normally showing in cases of debugging with webpack / vuejs) as when I run the app locally:
BUT: at the end, in the browser window the app is not loaded
If I run the commands docker images and docker ps I can see that the image and the container are there, and while creating them, I did not got any error messages.
I found this post and had a few tries for changing the Dockerfile as:
Option 1
FROM node:8.11.1 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 8080
ENTRYPOINT ["ng", "serve", "-H", "0.0.0.0"]
Option 2
FROM node:8.11.1 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
ENTRYPOINT ["ng", "serve", "-H", "0.0.0.0"]
EXPOSE 8080
CMD ["npm", "run", "dev"]
But it seems none of them is working.
btw. my package.json file looks like:
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
}
So I'm wondering: how to make the app to be opened in the browser from the docker image?
SOLUTION: not, sure if this was the reason for the fix, but I did two things. As mentioned, I'm working with the VueJS and webpack, so inside of the file named config/index.js, which initially looked like:
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // <---- this one
port: 8080,
I changed the host property from 'localhost' into '0.0.0.0', removed the EXPOSE 8080 line from the Dockerfile (the initial Docker file from my question above) since I noticed that the port from the config file is used by default and also restarted the installed Docker tool on my local machine.

Resources