I have a react app which is using the webpack dev server. The server proxies into another web api for CRUD. I can use it when running locally but when building the container, the app does not connect.
Webpack config
devServer: {
contentBase: resolve(__dirname, 'dist'),
host: 'localhost',
port: 3001,
hot: true,
open: true,
inline: true,
proxy: {
'/api': {
target: 'http://localhost:4567/streams',
secure: false,
pathRewrite: { '^/api': '' },
changeOrigin: true,
},
},
},
dockerfile
FROM node:12-alpine
WORKDIR /app
COPY ./package*.json ./
RUN npm ci
COPY . ./
docker-compose
version: '3.7'
services:
web:
container_name: fm-admin
restart: always
build:
context: .
ports:
- '3001:3001'
command: npm start
environment:
- CHOKIDAR_USEPOLLING=true
stdin_open: true
Further more, when i swapped the host from localhost to 0.0.0.0, I am getting the following error
[HPM] Error occurred while trying to proxy request from 0.0.0.0:3001 to http://localhost:4567/streams (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)
But the streams api is running.
Hoping i can get some help here.
The whole context is not described very precisely in the question, especially the service listening at 'http://localhost:4567.
I assume that target: 'http://localhost:4567/streams' is executed inside the container that is listening on :3000 in the attempt to proxy to :4567.
If this is true, then it is normal to lack the connectivity. When localhost is used inside the container, the container will try to proxy into itself on :4567.
If you are trying to reach a service that is listening on :4567 on the host machine, you probably need to use the IP address of the docker0 interface, instead of localhost as suggested in this post.
Related
I am trying to deploy my React + Spring Boot app to docker. However, the api from backend seems not connected with my React app although I have already check the port 8080 of the Spring Boot server and check the proxy.js in the React app. It keeps performing "Error occurred while trying to proxy request" error. Please help me answer this!
Here's the proxy.js
export default {
dev: {
'/api/': {
target: 'http://localhost:8080/',
changeOrigin: true,
pathRewrite: {
'^': '',
},
},
}
}
This is the dockerfile of the React App
FROM node:12
# Create app directory
WORKDIR /usr/src/app
# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm#5+)
COPY package*.json ./
RUN npm install
# If you are building your code for production
# RUN npm ci --only=production
# Bundle app source
COPY . .
EXPOSE 8000
ENTRYPOINT npm run dev
The Backend Dockerfile
FROM openjdk:8-jdk-alpine
EXPOSE 8080
RUN addgroup -S spring && adduser -S spring -G spring
USER spring:spring
ARG JAR_FILE=target/*.jar
COPY ${JAR_FILE} app.jar
ENTRYPOINT ["java","-jar","/app.jar"]
And the docker-compose.yml file
version: "3"
services:
server:
build:
context: ./service
dockerfile: ./Dockerfile
ports:
- "8080:8080"
image: academy-server
client:
build:
context: ./web
dockerfile: ./Dockerfile
ports:
- "8000:8000"
image: academy-client
links:
- "server"
Running in Docker is the same as if you were running your front end and backend in two different machines. As such, you cannot use localhost to talk to your backend. Instead you need to use the service names as defined in your docker-compose. So in your case you should use 'server' instead of localhost.
Docker-compose automatically creates an internal network, attaches both of your containers to that network and uses the service names for routing between the containers
i'm new here and i hope to be able to find a solution to my problem :)
So,
I am developing an application (frontend + backend) with Nuxt.JS & Nest.JS and I would like to be able to deploy both applications in a single azure webapp.
So I used docker-compose to combine these two applications
I created my two applications nest and nuxt with their respective dockerfile but when I launch my azure webapp my application throws me a connection refused on the backend server address.
2021-01-04T14:25:40.285318405Z > app#1.0.0 start /src
2021-01-04T14:25:40.285328805Z > nuxt start
2021-01-04T14:25:40.285332905Z
2021-01-04T14:25:48.450602161Z ℹ Listening on: http://172.16.1.3:3000/
2021-01-04T14:27:27.474295806Z
2021-01-04T14:27:27.474325906Z ERROR getaddrinfo ENOTFOUND back back:5000
2021-01-04T14:27:27.474331907Z
2021-01-04T14:27:27.474336207Z at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:56:26)
2021-01-04T14:27:27.474340707Z
2021-01-04T14:27:27.502576941Z
2021-01-04T14:27:27.502597541Z ERROR getaddrinfo ENOTFOUND back back:5000
2021-01-04T14:27:27.502654542Z
2021-01-04T14:27:27.502660442Z at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:56:26)
2021-01-04T14:27:27.502664942Z
2021-01-04T14:43:42.908712507Z
2021-01-04T14:43:42.910087624Z ERROR getaddrinfo ENOTFOUND back back:5000
2021-01-04T14:43:42.910098524Z
2021-01-04T14:43:42.910103124Z at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:56:26)
2021-01-04T14:43:42.910107624Z
2021-01-04T14:43:42.942548608Z
2021-01-04T14:43:42.942574408Z ERROR getaddrinfo ENOTFOUND back back:5000
2021-01-04T14:43:42.942592008Z
2021-01-04T14:43:42.942598908Z at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:56:26)
2021-01-04T14:43:42.942605409Z
What I tried:
I tried to create a docker compose network, but to my basic knowledge both applications are in the same virtual network with docker compose
I tried to change the axios protocol
I tried fetching on localhost, 127.0.0.1, 0.0.0.0.0, back, thomassaison-back address
And I really don't know how to solve this problem which is quite difficult to debug
It's working locally
Here are my docker files:
Nuxt Dockerfile:
# Dockerfile
FROM node:10-alpine
ENV APP_ROOT /src
RUN mkdir ${APP_ROOT}
WORKDIR ${APP_ROOT}
ADD . ${APP_ROOT}
RUN npm install
RUN npm run build
ENV HOST 0.0.0.0
Nest Dockerfile:
FROM node:10 AS builder
WORKDIR /app
COPY ./package.json ./
RUN npm install
COPY . .
RUN npm run build
FROM node:10-alpine
WORKDIR /app
COPY --from=builder /app ./
CMD ["npm", "run", "start:prod"]
docker-compose.yml:
version: "3.3"
services:
thomassaison-front:
build: "./app/"
container_name: "front"
image: "thomassaison.azurecr.io/thomassaison-front"
restart: always
depends_on:
- thomassaison-back
ports:
- "80:3000"
command:
"npm run start"
thomassaison-back:
build: "server/"
container_name: "back"
image: "thomassaison.azurecr.io/thomassaison-back"
restart: always
ports:
- "5000:5000"
Azure WebApp docker-compose:
version: "3.3"
services:
thomassaison-front:
image: "thomassaison.azurecr.io/thomassaison-front:latest"
container_name: "front"
depends_on:
- thomassaison-back
ports:
- "80:3000"
command:
"npm run start"
thomassaison-back:
image: "thomassaison.azurecr.io/thomassaison-back:latest"
container_name: "back"
nuxt.config.js:
export default {
// Global page headers (https://go.nuxtjs.dev/config-head)
head: {
title: 'app',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
// Global CSS (https://go.nuxtjs.dev/config-css)
css: [],
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [],
// Auto import components (https://go.nuxtjs.dev/config-components)
components: true,
// Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
buildModules: [],
// Modules (https://go.nuxtjs.dev/config-modules)
modules: [
// https://go.nuxtjs.dev/bootstrap
'bootstrap-vue/nuxt',
// https://go.nuxtjs.dev/axios
'#nuxtjs/axios',
],
// Axios module configuration (https://go.nuxtjs.dev/config-axios)
axios: {
baseURL: 'https://back:5000',
},
// Build Configuration (https://go.nuxtjs.dev/config-build)
build: {},
}
In Azure Web App, when you use the docker-compose to run multiple containers, then all the containers can communicate with each other via the port that other containers expose, they are using the same host. See the example here, you need to set the environment variable and the option depends_on for the container that you want to connect:
version: '3.3'
services:
db:
image: mysql:5.7
volumes:
- db_data:/var/lib/mysql
restart: always
environment:
MYSQL_ROOT_PASSWORD: somewordpress
MYSQL_DATABASE: wordpress
MYSQL_USER: wordpress
MYSQL_PASSWORD: wordpress
wordpress:
depends_on: # here
- db
image: wordpress:latest
ports:
- "8000:80"
restart: always
environment:
WORDPRESS_DB_HOST: db:3306 # here
WORDPRESS_DB_USER: wordpress
WORDPRESS_DB_PASSWORD: wordpress
volumes:
db_data:
I'm not sure, but maybe you can change the value of baseURL into https://thomassaison-back:5000 in the nuxt.config.js file, like the depends_on you set in the docker-compose.
I am trying to run Node/React project inside Docker containers. I have a NodeJS server for the API's and the client app. I also have concurrently installed and everything works fine when running npm run dev.
This issue is when I run the server and app via a docker-compose.yml file I get the following error from the client:
client | [HPM] Error occurred while trying to proxy request /api/current_user from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)
Here is the docker-compose.yml
version: "3"
services:
frontend:
container_name: client
build:
context: ./client
dockerfile: Dockerfile
image: client
ports:
- "3000:3000"
volumes:
- ./client:/usr/src/app
networks:
- local
backend:
container_name: server
build:
context: ./
dockerfile: Dockerfile
image: server
ports:
- "5000:5000"
depends_on:
- frontend
volumes:
- ./:/usr/src/app
networks:
- local
networks:
local:
driver: bridge
Server Dockerfile
FROM node:lts-slim
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
EXPOSE 5000
# You can change this
CMD [ "npm", "run", "dev" ]
Client Dockerfile
FROM node:lts-slim
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
EXPOSE 3000
CMD [ "npm", "start" ]
I am using "http-proxy-middleware": "^0.21.0" so my setupProxy.js is
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(proxy('/auth/google', { target: 'http://localhost:5000' }));
app.use(proxy('/api/**', { target: 'http://localhost:5000' }));
};
You should use container_name instead of localhost
app.use(proxy('/auth/google', { target: 'http://localhost:5000' }));
app.use(proxy('/api/**', { target: 'http://localhost:5000' }));
You can also check these details by inspecting your network using following command:-
docker inspect <network_name>
It will show all the connected containers to the network, also the host names created for those containers.
NOTE : Host names are created based on container_names otherwise based
on service names.
I'm attempting to expose a react application to the Docker container it currently sits inside.
My Dockerfile successfully builds my image and runs my application on the configured port (8080). I then try to bind port 8080 of the container to port 8080 of the host. However, when I visit the host machine at port 8080 my application is not here.
docker run -d -p 8080:8080 --name react-deployment-container react-deployment:dev
I have an existing node application already exposed on the same host machine running on a different port (3000), so I am confident it is not an issue binding a port when running the Docker container.
I think the issue might be the way I am attempting to expose the application in my Webpack configuration. Webpack builds perfectly but doesn't appear to available to the Docker container.
webpack.config.js
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
host: '0.0.0.0',
port: 8080
}
package.json
"scripts": {
"start": "webpack-dev-server --host 0.0.0.0"
},
I have tinkered with the configuration recommended in the two questions below with no luck.
How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?
https://github.com/webpack/webpack-dev-server/issues/547
The repo for this project is here
I made two 2 containers, one for the RethinkDB and one for a nodejs app.
I want to connect my nodejs app to this RethinkDB but everytime I try get an error
Error:{"message":"Failed to connect to localhost:58015\nFull error:\n{\"code\":\"ECONNREFUSED\"
But I can connect the same nodejs app running without Docker to the RethinkDB, with the open port (58015).
My Docker compose config look like this
# Rethink DB
rethink:
build: docker/rethinkdb
container_name: rethink
ports:
- 58080:8080
- 58015:28015
- 59015:29015
# NodeJS
nodejs:
build: docker/nodejs
container_name: nodejs
ports:
- 53000:3000
- 55000:5000
depends_on:
- rethink
To connect my app to the db I set the host and port inside a JS config file
database: {
servers: [
{
host: process.env.DB_PORT_28015_TCP_ADDR || 'localhost',
port: process.env.DB_PORT_28015_TCP_PORT || 28015
}
],
name: 'atlas'
},
I tried with RethinkDB port (28015) and with my open port (58015) without success.
I tried to link this two containers with links, network_mode, without success too.
Every solutions I tried don't work.
I think my Rethink container is not ready when the nodejs app try to connect. I really don't understand the problem, if this not this.
The nodejs app is running with pm2
How can I made this app connect to my db ?
For you config, you should use
# Rethink DB
rethink:
build: docker/rethinkdb
container_name: rethink
ports:
- 58080:8080
- 58015:28015
- 59015:29015
# NodeJS
nodejs:
build: docker/nodejs
container_name: nodejs
ports:
- 53000:3000
- 55000:5000
links:
- rethink
depends_on:
- rethink
and in JS code
database: {
servers: [
{
host: process.env.DB_PORT_28015_TCP_ADDR || 'rethink',
port: process.env.DB_PORT_28015_TCP_PORT || 28015
}
],
name: 'atlas'
},
As far as I know, one Docker container will not see the other unless specifically linked and using the same net:
docker run \
--name ${NEWAPP} \
--restart=always \
--env MYAPPPAR=${PROJ} \
-v /var/log/docker/node/logs:/usr/src/app/log \
--link myapp_rethink_1:myapp_rethink_1 \
--net myapp_default \
-p ${PORT}:9000 \
-d ${NEWAPP}
So you need both --net and --link:
--link format is sourcecontainername:containeraliasname
--net so that containers can find each other with internal DNS / containername. You can check network with 'docker network ls'
When using newer versions of docker-compose, your services will be configured to run on the same network.
The top level service name in your 'docker-compose.yml' will become the host that needs to be specified, when connecting to RethinkDB from your app:
# docker-compose.yml
version: '3.2'
Services:
web:
build: .
links: db
...
db:
image: rethinkDB
...
Using the example above, you can connect to RethinkDB by using the host named 'db', within the app configuration file:
module.exports = {
rethinkdb: {
host: 'db',
port: 28015
}
};