I have seen this question asked different ways on SO. However, I have not been able to find an answer that works for me. Perhaps I haven't done the right search. So here I go. I'm brand new to docker and have deployed a simple react app using docker. I am able to hit the react app when I run it locally on my host, but when I try to access it from the host while running in the container, my luck runs out.
I understand that the issue is that the container is listening on its loopback interface, but it should listen on all intefaces (0.0.0.0). My issue is that I am not sure how to do that. I've seen instructions on how to do it for a node js app, for python http.server, etc. But not for a react app.
My app is super straightforward. I've created an app using create-react-app. I am able to run it locally and see the react page (http://localhost:3000). I've create a standard Dockerfile for a react app:
FROM node:12.15.0-alpine
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD [ "npm", "start" ]
I then built and ran it using the following commands:
docker build -t sampleapp .
docker run -p 3000:3000 -d sampleapp
And as mentioned am not able to see the app on http://localhost:3000
Any help would be ver appreciated. Thanks in advance.
Try adding this to your .env.development
PORT=3000
If you don't have .env.development then make it and add this env var and see if it works.
Related
everyone. Have been banging my head against this for a while, and maybe someone else has a better idea of what my issue is. I have a react and lb4 application and I want to host it on our kubernetes cluster. I build the react project and put it into a build folder in my lb4 project and serve those files while using the lb4 backend also for APIs. I put everything in a docker container, and when I run the container locally, it works as I would expect. When I put the container on kubernetes, I am able to hit the APIs from the loop back project but get a 404 when trying to hit the GUI.
In my LB4 project, I have this to serve the static files:
constructor(options: ApplicationConfig = {}) {
super(options);
// Set up the custom sequence
this.sequence(MySequence);
// Set up default home page
this.static('/',path.join(__dirname, '../build'));
// Customize #loopback/rest-explorer configuration here
this.bind(RestExplorerBindings.CONFIG).to({
path: '/explorer',
});
this.component(RestExplorerComponent);
this.projectRoot = __dirname;
and here is my docker file that I'm using:
RUN mkdir -p /src/app
COPY . /src/app
WORKDIR src/app
ARG env_name
ENV NODE_ENV=env_name
ENV PUBLIC_PATH "/"
RUN npm install
RUN npm run build:client
COPY /src/client/build /src/server/
EXPOSE 3001
CMD ["npm", "run", "start"]
Anyone notice anything that might be the issue? Would appreciate it greatly. Thanks.
Edit: Kind of found the issue, I think. Looks like the copying of the static files at the copy step in my dockerfile doesn't quite work as I intended, so I think it's looking at an empty folder on the kubernetes cluster. Now just to see why that isn't working.
Without using NodeJs to serve the static file, I am trying to build Docker image for create react app with the below folder structure
sampleapp -
client
src
...
DockerFile
So client is build by create-react-app client, the application is just consuming services and rendering it.
Dockerfile:
FROM node:10.15.1-alpine
COPY . /var/panda/client
WORKDIR /var/panda/client
RUN npm install --no-cache && npm run build
EXPOSE 4000
CMD ["npm", "start"]
How can I start the Docker container in local and prod, and is the above Docker script is fine for running the application in production build?
If you're asking how to run an image, you simply do docker build -t client ., and then docker run client. Your Dockerfile is not fine for a prod environment because it runs as root. You should add the following lines just before the last line.
RUN adduser -D user
USER user
Once you've run npm run build you will have a set of static files you can serve. Anything that serves static files will work fine. One typical setup is to use a multi-stage build to first build the application, then serve it out of an Nginx image:
FROM node:10.15.1-alpine AS build
COPY . /var/panda/client
WORKDIR /var/panda/client
RUN npm install --no-cache && npm run build
FROM nginx:1.17
COPY --from=build /var/panda/client/build /usr/share/nginx/html
For day-to-day development, just use the ordinary CRA tools like npm run start directly on your desktop system. You'll get features like live reloading, and you won't have to mess with Docker volumes or permissions. Since the application ultimately runs in the browser it can't participate in things like Docker networking; except for pre-deployment testing there's not really any advantage to running it in Docker.
I am trying to run my react web app in docker container, building the image works just fine but running the container gives me this error:
Starting the development server...
Failed to compile
./src/App.js
Module not found: Can't resolve './componenents/Navbar/NavBar' in 'usr/src/app/src'
As far as i know it should work but it doesn't, this is my dockerfile:
FROM node:10.16.3
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD [ "npm", "start" ]
what am i doing wrong?
NOTE: all my stuff for the web application itself including the dockerfile is in a folder called client, i changed the build context on dockerhub to make this work.
Alright i fixed it, apperantly i renamed a file on my pc, but it was not renamed on github, so that's why docker couldn't find the file
First of all, I would inform the readers that I am pretty new in NodeJS, Angular and Express.
I have partially completed a project, where I am needed to create a Website in AngularJS with a server side logic(ExpressJS).
But while developing I realised that hosting or deploying a MEAN stack isn't as straightforward like LAMP stack.
So i request a solution to the following problem,
I want to host a website developed in Angular with the endpoint in ExpressJS and database in MySQL.
I have tried to find solutions to this. But none of them painted a clear picture in front of me.
Sadly, the server i have is a free tier due to budget constraints and its a plain simple Ubuntu 18.04 System.
Here is one link that i tried to understand but is for azure.
This one was kind of more helpful but again it raised many questions.
Since I am new to this technology I would be grateful if somebody would help me through the deployment process of Angular and Express together on the same server.
I would go with Docker. One container running a node image and another container running mysql image. The node container will run your angular and express app. Also with Docker you will have no difference between your developing environment and your production environment.
Do you have Docker installed? Which OS are you using?
Download node image from Docker Hub:
docker pull node
Then i would create a Dockerfile to generate an image from node image while copying all your source code on it.
FROM node:latest
LABEL author="Your Name"
ENV NODE_ENV=production PORT=3000
COPY . /app
WORKDIR /app
RUN npm install
EXPOSE $PORT
ENTRYPOINT ["npm", "start"]
The COPY command will copy the source code of your current directory (.) to the app directory inside the container. WORKDIR will set the context where your commands will be executed inside the container so you can run npm install where your package.json is. RUN will download all app dependencies inside the container. ENTRYPOINT will execute the file that will start your app as specified in your package.json file, like below:
"name": "app",
"version": "1.0.0",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js"
},
"license": "ISC",
"dependencies": { ... }
.dockerignore file (so you do not copy your node modules, Dockerfile, etc inside your container):
node_modules
npm-debug.log
Dockerfile*
docker-compose*
.dockerignore
.git
.gitignore
README.md
LICENSE
.vscode
To create an image based on the above Dockerfile (you need to place Dockerfile and run docker build in the same folder of your app container):
docker build -t image_name .
To run your image in a Docker container:
docker run -d -p 3000:3000 image_name
Running the container like this you can open your app in the browser with your DOCKER_HOST_IP:PORT and it will run your app.
Assuming you are running your app in PORT 3000, we are mapping external 3000 port to the internal port 3000 inside the container where your app is running.
EXPRESS
In order for express to serve your files, you need to set express.static:
// serve client side code.
app.use('/', express.static('app_folder'));
You can git clone your app on EC2 instance and then install a systemd service, here's an example of a service file:
[Unit]
Description=My App
After=syslog.target network.target
[Service]
Environment=NODE_ENV=production
ExecStart=/usr/bin/node /home/appuser/repo-app/index.js
WorkingDirectory=/home/appuser/repo-app/
Restart=always
StandardOutput=syslog
StandardError=syslog
SyslogIdentifier=myapp
User=appuser
Group=appuser
[Install]
WantedBy=multi-user.target
You can also make a good use of a haproxy in front of your express endpoint.
We have an app written in Angular
We will use an nginx container to host the angular
but the problem is where we have to perform the npm install for creating the /dist folder in angular.
Do we have to perform it in the dockerfile of our nginx-webserver or is this against the rules?
You are obviously using node as your dev server and want to use NGINX as your prod server? We have a similar setup
this is how we do it ...
in our dev environment, we have /dist on .gitignore
on a push to git we have a Jenkins job that does a build (this does the npm install inside a Jenkins build server)
on a successful Jenkins job we do a docker build (a downstream job), the docker build copies the /dist files into the docker image
we then do a docker push
the resulting docker image can be pulled from any server - hope that helps
would welcome your thoughts :)
PS The problem with doing the npm install during the docker build is that your docker container becomes messy. You end up installing loads of software inside it just for setup purposes.
All you really want in your docker image is NGINX serving up your build files.
This is why we do not do an npm install during the docker build.