How to Dockerizing a Angular 2 web app via node js? - node.js

I tried out finding many ways for Dockerizing angular 2 web app using node js but not yet worked it is running on local but not working on docker container.Does anyone have any proper Dockerfile and package.json file for docking angular 2 app.
FROM node:boron
# Create app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
# Install app dependencies
COPY package.json /usr/src/app/
RUN npm install
# Bundle app source
COPY . /usr/src/app
EXPOSE 5655
CMD [ "npm","start" ]
Site cant be reached while accessing
Below are some possible ways i found on stack over flow but not worked
docker run --rm --name my-container -it -p 8080:4200 -v $(pwd):/var/www -w "/var/www" node npm start
in package.json even i kept my port as dynamic "ng serve -host 0.0.0.0",
And also suggest me which server i need to use either nginx or node for docking angular 2 web-app
"scripts": {
"start": "node ./bin/www",
"build": "del-cli public/js/app && webpack --config webpack.config.dev.js --progress --profile --watch",
"build:prod": "del-cli public/js/app && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack --config webpack.config.prod.js --progress --profile --bail && del-cli 'public/js/app/**/*.js' 'public/js/app/**/*.js.map' '!public/js/app/bundle.js' '!public/js/app/*.chunk.js' 'assets/app/**/*.ngfactory.ts' 'assets/app/**/*.shim.ts'"
}

first of all I would suggest to run "npm start" at your machine;
and check if after this you can reach you angular app in a browser;
if this works - you will need to remember at which port your angular app is served;
add new RUN section "RUN npm run build:prod" right before EXPOSE line;
set correct port at section EXPOSE;
run you container: "docker run --rm --name my-container -it ."
open browser at http:127.0.0.1:HERE_PORT_FROM_EXPOSE_SECTION
Here is a small example:
https://github.com/karlkori/dockerized-angular-app
Also I want to add that for production it will be better to use Nginx or CloudFront.

Related

Docker container is refusing connection

I am using Dockerfile for Nodejs project but its returning Connection refused error
When I run the app without Docker it works absolutely fine.
Command I use to build and run the docker container is as follows:
docker build -t myapp .
docker run -it -p 8080:8080 myapp
Running above command runs without any error but when I hit http://localhost:8080/test-url it fails
My dockerfile is as follows:
FROM node:16.16.0-alpine
ADD . /opt
COPY . .
RUN npm install
EXPOSE 8080
RUN chmod +x /opt/deploy.sh
RUN apk update && apk add bash
CMD ["/bin/bash", "/opt/deploy.sh"]
And my package.json is as follows (truncated to show only script):
"scripts": {
"start": "DEBUG=app* node index.js",
"build": "rimraf build && babel-node ./src --out-dir build/src && npm run docs",
"dev": "DEBUG=app* nodemon --exec babel-node index.js",
"lint": "eslint 'index.js' 'src/**/*.js' 'src/index.js'",
"docs": "apidoc -i src/ -o public/docs",
"prepare": "husky install",
"lint-staged": "lint-staged"
},
For development I use following command which works fine::
npm run dev
For deploymeent I run deploy.sh which has env variables and final command as ::
npm run build
npm run start
Even when I am trying http://localhost:8080/test-url by loging into docker interactive terminal it returns same error - Connection Refused
Your Port mapping looks right to me. Did you check your firewall? Maybe it is blocking the connection. It could also be helpful to test, if you can run an NGINX-Container on Port 8080. That way you can check if it is a general configuration-problem with Docker or a specific problem of your Image.
Also, did you try to set your node server to listen to 0.0.0.0 instead of localhost? I'm not sure how Docker handles IPs in the Containers, but I was thinking maybe it is called by it's internal ip. If that is the case and your server listens to localhost only, it shouldn't accept the connection.
I hope one of these things can point you in the right direction.

Docker Node backend - "this site can't be reached"

I'm trying do build a docker image of my Node backend for deployment but when I run it in a container and open in the browser I get "This site can’t be reached" error and the following log in dev tools:
crbug/1173575, non-JS module files deprecated
My backend is based on GraphQL Apollo server. Dockerfile is as following:
FROM node:16
WORKDIR /app
COPY ./package*.json ./
RUN npm ci --only=production
# RUN npm install
COPY . .
# RUN npm run build
EXPOSE 4000
CMD [ "node", "dist/main.js" ]
I've also tried to use the commented code, with no result.
The image builds without a problem and after running the container I get 🚀 Server ready at localhost:4000 in the docker logs, so I'd expect it to work properly.
"scripts": {
"build": "tsc",
"start": "node dist/main.js",
"dev": "concurrently \"tsc -w\" \"nodemon dist/main.js\""
},
That's the scripts part of my package.json I've also tried CMD ["npm", "start"] in Dockerfile but that doesn't work either. When I run the backend from terminal using npm start I can access the GraphQL playground at localhost:4000 - I assume that should be the same with docker?
I'm still new to docker so I'd be grateful for any hints. Thanks
EDIT:
I run the container with the following command:
docker run --rm -d -p 4000:80 image-name:latest
Seemingly it's running on port 0.0.0.0:4000 as that's what it says under 'PORT' when I execute docker ps
Please run docker inspect command and you will get IP and then run through that ip in browser

nodemon not starting when run in kubernetes environment

I am working on containerizing a nodejs app to be running on GKE.
the scripts section of package.json looks like this
"scripts": {
"dev": "npm-run-all --parallel dev:build-server dev:build-client dev:server",
"dev:server": "nodemon -L --watch build --exec node build/bundle.js",
"dev:build-server": "webpack --config webpack.server.js --watch",
"dev:build-client": "webpack --config webpack.client.js --watch"
},
so when running im using npm run dev to start them all.
this works perfectly while it is running on VM.
But when run as a container in kubernetes the nodemon process won't start.
nor it listens on the port. it gives a 502 status error on browser
but when you ssh to the pod and try running the command it starts the process.listens on 3001 port but obviously it gives routes not found on browser. since they are not linked as expected.
below is the dockerfile
FROM node:10.19-stretch
ENV USER="vue" UID="1001"
RUN apt-get update --fix-missing
RUN apt-get install -yq curl
RUN rm /bin/sh && ln -s /bin/bash /bin/sh && \
mkdir -p /opt/vue && \
addgroup --system -gid $UID $USER && \
adduser --system --uid $UID --gid $UID $USER
WORKDIR /opt/vue
COPY dashboard/. /opt/vue/
RUN npm cache clean --force && \
npm install && \
npm cache verify && \
chown $USER.$USER -R /opt/vue
USER $USER
EXPOSE 3001
# ENTRYPOINT ["/usr/bin/dumb-init","--"]
# CMD ["npm run dev"]
CMD ["npm", "run", "dev" ]
tried using base images (node:10.19-stretch,node:10.19.0-alpine3.11)
some had sugested installing inotify but even that didn't work.
what am I missing. please help.
UPDATE ---
when run either in docker or kubernetes standerout log says this
with no errors(enabled verbose output)
[nodemon] Looking in package.json for nodemonConfig
Usage: nodemon [nodemon options] [script.js] [args]
See "nodemon --help" for more.
[nodemon] exiting
after some peer reviewing and posting this on other networks found the correct answer.
issue behind was obvious.
in the scripts section the all dev:* scripts were running parallel. so when the two build steps were running the nodemon service was trying to start the service. and since the build/bundle.json is not there it gives a file not found. but the nodemon thinks of it as invalid arguments and gives the command help.
so what I did was adding the build steps in the docker file by running
npm run dev
and then on the CMD adding the
npm run prod:server
which actually speeded up the startupt time too.
here is the dockerfile part that was changed.
RUN npm cache clean --force && \
npm install && \
npm cache verify && \
chown $USER.$USER -R /opt/vue
USER $USER
EXPOSE 3001
CMD ["npm", "run", "prod:server" ]
also I had removed nodemon as its not needed. since files will not be changed anyway and they are too bulky
"scripts": {
"dev": "npm-run-all --parallel dev:build-server dev:build-client",
"prod:server": "node build/bundle.js",
"dev:build-server": "webpack --config webpack.server.js --watch",
"dev:build-client": "webpack --config webpack.client.js --watch"
},
finally.. !! viola.. it worked.
Thanks everyone who put their precious time on this.

webpack --watch && http-server ./dist -p 8080 --cors -o not working

"server:dev": "webpack --watch && http-server ./dist -p 8080 --cors -o -d false"
When I run npm run server:dev, the script starts --watch but http-server is not running. If I shuffle the statements then http-server is running and webpack is not watching. I know webpack-dev-server solves the problem but I want to have one simple command that watches changes and starts server in browser when I build it.
Could anyone help me with this?
If you are looking for a cross-platform solution, take a look at the package npm-run-all:
{
"scripts": {
"server:webpack": "webpack --watch",
"server:start": "http-server ./dist -p 8080 --cors -o -d false",
"serve": "npm-run-all --parallel server:*"
}
}

Why pm2 NodeJS app starts but not accessible on EC2

I have a Nodejs app running on AWS EC2. My package.json has the following instructions:
"scripts": {
"build": "babel src -s -D -d dist --presets es2015,stage-0",
"start": "node dist/index.js",
"prestart": "npm run build",
..
So when connected to EC2 I (after install and cd to proj folder) I do PORT=8080 npm start The app starts fine - but messages in the console and is acessinble via my EC2 addres :8080. Also if I run PORT=8080 node dist/index.js
- also good.
But since I would like to use monitoring, restarting of the script by pm2 I try do following:
pm2 start dist/index.js -- PORT=8080
or
PORT=8080 pm2 start dist/index.js
I see that pm2 has the app started,
but it's not acessible on AWS address :8080
What do I do wrong?

Resources