I am trying to deploy nextjs app in the sub path using k8s ingress.
Here is my ingress config:
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
name: simple-ingress
annotations:
kubernetes.io/ingress.class: 'nginx'
nginx.ingress.kubernetes.io/rewrite-target: /
spec:
tls:
- hosts:
- 'example.com'
rules:
- host: 'example.com'
http:
paths:
- path: /
pathType: Prefix
backend:
service:
name: react-app
port:
number: 80
- path: /site
pathType: Prefix
backend:
service:
name: next-app
port:
number: 3002
And here is my nextjs config:
const nextConfig = {
staticPageGenerationTimeout: 60,
assetPrefix: isProd ? '/site' : '',
basePath: isProd ? '/site' : '',
images: {
path: isProd ? '/site/_next/image' : '/_next/image',
},
}
module.exports = withNx(nextConfig)
With the above configuration, 1st ingress works and i am able to reach my endpoints at example.com, in the same time example.com/site returns http 404. What am i doing wrong?
I have a simple app architecture:
A webapp build on Django Rest Framework providing an API
A Nginx reverse proxy used to serve webapp and its static files
A redis container used by webapp
A React app used as frontend
I tried to deploy this using Kubernetes in local first before deploying on the cloud (AWS or something similar).
Here my global deployment file (I intend to split in smaller part after).
apiVersion: v1
kind: Service
metadata:
name: redis
labels:
app: redis
spec:
ports:
- port: 6379
protocol: TCP
targetPort: 6379
selector:
app: redis
---
apiVersion: apps/v1
kind: Deployment
metadata:
name: redis
spec:
selector:
matchLabels:
app: redis
template:
metadata:
labels:
app: redis
spec:
containers:
- name: redis
image: redis
ports:
- containerPort: 6379
---
apiVersion: v1
kind: Service
metadata:
name: webapp
labels:
app: webapp
spec:
ports:
- port: 8080
protocol: TCP
targetPort: 8080
name: http
- port: 8081
protocol: TCP
targetPort: 8081
name: daphne
selector:
app: webapp
---
apiVersion: apps/v1
kind: Deployment
metadata:
name: webapp
spec:
selector:
matchLabels:
app: webapp
template:
metadata:
labels:
app: webapp
spec:
containers:
- name: webapp
image: registry.gitlab.com/anima879/celestorbe/backend
imagePullPolicy: Always
volumeMounts:
- name: static-data
mountPath: /vol/web
env:
- name: SECRET_KEY
value: secretkey1234
- name: ALLOWED_HOSTS
value: "127.0.0.1,localhost,proxy"
ports:
- containerPort: 8080
- containerPort: 8081
imagePullSecrets:
- name: gitlab-registry-secret
volumes:
- name: static-data
hostPath:
path: static-data
---
apiVersion: v1
kind: Service
metadata:
name: front
labels:
app: front
spec:
ports:
- port: 80
protocol: TCP
targetPort: 80
selector:
app: front
---
apiVersion: apps/v1
kind: Deployment
metadata:
name: front
spec:
selector:
matchLabels:
app: front
template:
metadata:
labels:
app: front
spec:
containers:
- name: front
image: registry.gitlab.com/anima879/celestorbe/front
imagePullPolicy: Always
volumeMounts:
- name: static-data
mountPath: /vol/web
ports:
- containerPort: 80
env:
- name: REACT_APP_API_URL
value: webapp
imagePullSecrets:
- name: gitlab-registry-secret
volumes:
- name: static-data
hostPath:
path: static-data
---
apiVersion: v1
kind: Service
metadata:
name: proxy
labels:
app: proxy
spec:
ports:
- port: 80
protocol: TCP
targetPort: 80
selector:
app: proxy
---
apiVersion: apps/v1
kind: Deployment
metadata:
name: proxy
spec:
replicas: 1
selector:
matchLabels:
app: proxy
template:
metadata:
labels:
app: proxy
spec:
containers:
- name: proxy
image: registry.gitlab.com/anima879/celestorbe/proxy
imagePullPolicy: Always
volumeMounts:
- name: static-data
mountPath: /vol/web
ports:
- containerPort: 80
imagePullSecrets:
- name: gitlab-registry-secret
volumes:
- name: static-data
hostPath:
path: static-data
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
name: main-ingress
annotations:
kubernetes.io/ingress.class: "nginx"
nginx.ingress.kubernetes.io/configuration-snippet: |-
rewrite ^/api/(.*)$ /$1 break;
rewrite_log on;
spec:
rules:
- http:
paths:
- path: /
pathType: Prefix
backend:
service:
name: front
port:
number: 80
- path: /api(/|$)(.*)
pathType: Prefix
backend:
service:
name: proxy
port:
number: 80
- path: /ws
pathType: Prefix
backend:
service:
name: proxy
port:
number: 80
As you can see, I use an Ingress as the entrance for my application. Every url should go to the frontend by default (so the user have the UI to use the app). But when a request is made to the back, it starts with /api.
For instance:
localhost/login should display the login page from the React app
localhost/api/login should send a login request to the back (with the POST method)
I need to rewrite the url to the back to localhost/login because webapp doesn't understand URL starting with /api.
But if I go in the browser to an API endpoint, Django display a page that allows to use the endpoint.
My problem is here. When I tried to directly access the API from the browser, the CSS are not loaded:
The type of the CSS file are not correct, and I don't know how to solve this.
Also I suspect the Ingress tried to get the CSS from the frontend instead of Django.
I know it is a tricky issue, but if you have a better alternative or some workflow to solve the issue, i would appreciate.
Thank you.
P.S. When I don't use an Ingress and use a LoadBalancer service (On different port for Front and proxy), it works. Except the front can't do request to the back if I don't the IP of the proxy LoadBalancer. Because I want very low coupling, I don't think it is a good idea (But i may be wrong).
I am hosting my reactjs-redux application to kubernetes via GitHub action. The pipeline is successful but after the deployment I am only seeing the below Nginx screen. I feel the issue is with the kubernetes. Can someone please help me on this
My Kubernetes manifest is given below
deployment.yml
apiVersion: apps/v1
kind: Deployment
metadata:
name: myapp-dev
namespace: myapp
spec:
replicas: 3
revisionHistoryLimit: 10
template:
metadata:
labels:
app: myapp
spec:
containers:
- name: myapp
image: artifactory.com:2195/myapp:latest
resources:
limits:
cpu: "3"
memory: 1Gi
requests:
cpu: 300m
memory: 128Mi
ports:
- containerPort: 80
imagePullSecrets:
- name: regsecret
selector:
matchLabels:
app: myapp
My Github action step is as given below
publish:
name: Upload to Artifactory
needs:
- build
runs-on: self-hosted
container:
image: artifactory.com:2005/ubuntu-docker-kubectl:1.0
steps:
- name: Checkouting project
uses: actions/checkout#v2
- name: Login to On-Prem Registry
uses: actions/login-action#v1
with:
registry: artifactory.com:2195/artifactory
username: ${{ secrets.ARTIFACTORY_USERNAME }}
password: ${{ secrets.ARTIFACTORY_PASSWORD }}
- name: Build and push image to Artifactory
uses: actions/build-push-action#v2
with:
file: 'Dockerfile'
push: true
tags: "artifactory.com:2195/myapp:latest"
service.yml
apiVersion: v1
kind: Service
metadata:
name: myapp-dev
namespace: myapp
labels:
app: myapp
spec:
ports:
- port: 80
targetPort: 80
protocol: TCP
selector:
app: myapp
ingress.yml
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
name: myapp-dev
namespace: myapp
spec:
rules:
- host: dev-myapp.com
http:
paths:
- path: /
pathType: Prefix
backend:
service:
name: myapp-dev
port:
number: 80
Update 1
As per the discussion with #Hans Kilian the docker image is fine, we are able to run successfully in the localhost. So the issue is with the Kubernetes deployment.
Can someone please help me on this
Try to use this in your dockerfile:
WORKDIR /usr/share/nginx/html
COPY /usr/src/app/build/ .
In my next.config.js, I have a part that looks like this:
module.exports = {
serverRuntimeConfig: { // Will only be available on the server side
mySecret: 'secret'
},
publicRuntimeConfig: { // Will be available on both server and client
PORT: process.env.PORT,
GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
BACKEND_URL: process.env.BACKEND_URL
}
I have a .env file and when run locally, the Next.js application succesfully fetches the environment variables from the .env file.
I refer to the env variables like this for example:
axios.get(publicRuntimeConfig.BACKOFFICE_BACKEND_URL)
However, when I have this application deployed onto my Kubernetes cluster, the environment variables set in the deploy file are not being collected. So they return as undefined.
I read that .env files cannot be read due to the differences between frontend (browser based) and backend (Node based), but there must be some way to make this work.
Does anyone know how to use environment variables saved in your pods/containers deploy file on your frontend (browser based) application?
Thanks.
EDIT 1:
apiVersion: extensions/v1beta1
kind: Deployment
metadata:
annotations:
deployment.kubernetes.io/revision: "38"
creationTimestamp: xx
generation: 40
labels:
app: appname
name: appname
namespace: development
resourceVersion: xx
selfLink: /apis/extensions/v1beta1/namespaces/development/deployments/appname
uid: xxx
spec:
progressDeadlineSeconds: xx
replicas: 1
revisionHistoryLimit: 10
selector:
matchLabels:
app: appname
tier: sometier
strategy:
rollingUpdate:
maxSurge: 1
maxUnavailable: 1
type: RollingUpdate
template:
metadata:
creationTimestamp: null
labels:
app: appname
tier: sometier
spec:
containers:
- env:
- name: NODE_ENV
value: development
- name: PORT
value: "3000"
- name: SOME_VAR
value: xxx
- name: SOME_VAR
value: xxxx
image: someimage
imagePullPolicy: Always
name: appname
readinessProbe:
failureThreshold: 3
httpGet:
path: /healthz
port: 3000
scheme: HTTP
initialDelaySeconds: 5
periodSeconds: 10
successThreshold: 1
timeoutSeconds: 1
resources:
requests:
cpu: 100m
memory: 100Mi
terminationMessagePath: /dev/termination-log
terminationMessagePolicy: File
dnsPolicy: ClusterFirst
restartPolicy: Always
schedulerName: default-scheduler
securityContext: {}
terminationGracePeriodSeconds: 30
status:
availableReplicas: 1
conditions:
- lastTransitionTime: xxx
lastUpdateTime: xxxx
message: Deployment has minimum availability.
reason: MinimumReplicasAvailable
status: "True"
type: Available
observedGeneration: 40
readyReplicas: 1
replicas: 1
updatedReplicas: 1
You can create a config-map and then mount it as a file in your deployment with your custom environment variables.
apiVersion: extensions/v1beta1
kind: Deployment
metadata:
annotations:
deployment.kubernetes.io/revision: "38"
creationTimestamp: xx
generation: 40
labels:
app: appname
name: appname
namespace: development
resourceVersion: xx
selfLink: /apis/extensions/v1beta1/namespaces/development/deployments/appname
uid: xxx
spec:
progressDeadlineSeconds: xx
replicas: 1
revisionHistoryLimit: 10
selector:
matchLabels:
app: appname
tier: sometier
strategy:
rollingUpdate:
maxSurge: 1
maxUnavailable: 1
type: RollingUpdate
template:
metadata:
creationTimestamp: null
labels:
app: appname
tier: sometier
spec:
containers:
- env:
- name: NODE_ENV
value: development
- name: PORT
value: "3000"
- name: SOME_VAR
value: xxx
- name: SOME_VAR
value: xxxx
volumeMounts:
- name: environment-variables
mountPath: "your/path/to/store/the/file"
readOnly: true
image: someimage
imagePullPolicy: Always
name: appname
readinessProbe:
failureThreshold: 3
httpGet:
path: /healthz
port: 3000
scheme: HTTP
initialDelaySeconds: 5
periodSeconds: 10
successThreshold: 1
timeoutSeconds: 1
resources:
requests:
cpu: 100m
memory: 100Mi
terminationMessagePath: /dev/termination-log
terminationMessagePolicy: File
volumes:
- name: environment-variables
configMap:
name: environment-variables
items:
- key: .env
path: .env
dnsPolicy: ClusterFirst
restartPolicy: Always
schedulerName: default-scheduler
securityContext: {}
terminationGracePeriodSeconds: 30
status:
availableReplicas: 1
conditions:
- lastTransitionTime: xxx
lastUpdateTime: xxxx
message: Deployment has minimum availability.
reason: MinimumReplicasAvailable
status: "True"
type: Available
observedGeneration: 40
readyReplicas: 1
replicas: 1
updatedReplicas: 1
I added the following configuration in your deployment file:
volumeMounts:
- name: environment-variables
mountPath: "your/path/to/store/the/file"
readOnly: true
volumes:
- name: environment-variables
configMap:
name: environment-variables
items:
- key: .env
path: .env
You can then create a config map with key ".env" with your environment variables on kubernetes.
Configmap like this:
apiVersion: v1
kind: ConfigMap
metadata:
name: environment-variables
namespace: your-namespace
data:
.env: |
variable1: value1
variable2: value2
I have finally ran into an issue that is beyond my skill and no-one in house is very familiar with the issue at hand either. My issue is I am attempting to get grunt serve/server working on windows 7/8 at work to replace our current nginx configuration for development.
If I have my angularjs front-end and grails back-end both running locally I have no issues doing this but when I want to run my angularjs app through grunt serve locally and have it talk to our deployed back-end at test.domain.net I am getting a Proxy error: ECONNRESET error.
I have tried 3 versions of grunt-contrib-connect (0.1.10, 0.1.11, 0.2.0); 10 and 11 have slightly different errors but 2 is what I would prefer and is what is throwing the ECONNRESET.
What seems exceptionally strange to me is that with --stack --verbose it claims that I am redirecting through the proxy but when I look at the url in chrome it is still using local host.
Current error
> Proxied request: /app/orders?limit=15&offset=0 ->
> https://services-test.app.com:443/orders?limit=15&offset=0
> {
"host": "services-test.app.com", "connection": "keep-alive",
> "cache-control": "max-age=0", "accept": "application/json,
> text/plain, */*", "x-auth-token":
> "3an7h1oupnj6e7shfplf06adn8mr8q26", "if-modified-since": "0",
> "user-agent": "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36
> (KHTML, like Gecko) Chrome/43.0.2357.81 Safari/5
> 37.36", "referer": "http://localhost:9000/", "accept-encoding": "gzip, deflate, sdch", "accept-language": "en-US,en;q=0.8",
> "cookie": "_ga=GA1.1.1146585466.1432141723;
> JSESSIONID=5569C3D1BDC2CA2CBF5B72636A9338F4", "x-forwarded-for":
> "127.0.0.1", "x-forwarded-port": "80", "x-forwarded-proto": "http"
> }
> Proxy error: ECONNRESET
Pertinent part of Gruntfile.js (urls modified for privacy)
// The actual grunt server settings
connect: {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: 'localhost', //'0.0.0.0',
livereload: 35729
},
proxies: [
{
//context: '/api',
//host: 'localhost',
//port: 8080,
//https: false,
//changeOrigin: false,
//xforward: false
context: '/api',
host: 'services-test.app.com',
https: true,
port: 443,
xforward: true,
headers: {
'host': 'services-test.app.com',
'x-auth-token': '3an7h1oupnj6e7shfplf06adn8mr8q26'
},
rewrite: {
'^/api': ''
}
}
],
livereload: {
options: {
open: true,
base: [
'.tmp',
'<%= yeoman.app %>'
],
middleware: function(connect, options) {
if (!Array.isArray(options.base)) {
options.base = [options.base];
}
// Setup the proxy
var middlewares = [require('grunt-connect-proxy/lib/utils').proxyRequest];
// Serve static files.
options.base.forEach(function(base) {
middlewares.push(connect.static(base));
});
// Make directory browse-able.
var directory = options.directory || options.base[options.base.length - 1];
middlewares.push(connect.directory(directory));
return middlewares;
}
}
},
This stackoverflow here Grunt connect proxy rewrite not works in https is my exact issue but this does not solve my issue. Other related posts
http://www.ngroutes.com/questions/AUuACacna5vEqxqlK1fu/grunt-connect-proxy-proxy-created-but-i-get-a-404.html
this post is why host is included in the headers in my gruntfile.js and why services-test.app.com show in my error at all other than local host.
Lastly I have seen some stuff saying that this might be a CORS issue and while that might be possible the point of grunt-contrib-connect is to not have to make server side changes in my understanding.
Thanks to any who might help me resolve this and sorry it was kind of rambling I've looked through a lot of stuff today.
So there was a bug in the grunt-connect-proxy repository. It was fixed in this commit: https://github.com/drewzboto/grunt-connect-proxy/commit/f798bbd31b76b039a392b8f1bca55b310a7ac5c9
Updating to the latest commit in the repo fixed the problem for me. So you could do that or wait for the new release to come out.
Hope that fixes it for you!
I kept getting the error "Proxy error: ECONNRESET" in my console. This solution to downgrade to version 0.1.10 of grunt-connect-proxy worked. I followed this fettblog.eu tutorial on setting the proxy up.