name: Azure Static Web Apps CI/CD
on:
push:
branches:
- master
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- master
jobs:
build:
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v3
- uses: actions/setup-node#v3
with:
node-version: 16
- run: |
cd src
npm install
npm run citest
npm run build-dev2
rm -rf node_modules
- name: Publish website output
uses: actions/upload-artifact#v3
with:
name: DEMO APP
path: ${{ github.workspace }}/src/build
devDeploy:
runs-on: ubuntu-latest
needs: [build]
steps:
- name: Dev Deploy
uses: actions/download-artifact#v1
with:
name: DEMO APP
path: ${{ github.workspace }}
- name: Dev Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy#v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_NEW_SUN_1185DE103 }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
action: "upload"
###### Repository/Build Configurations ######
app_location: "" # App source code path relative to repository root
api_location: "" # Api source code path relative to repository root - optional
output_location: "build" # Built app content directory - optional
skip_app_build: true
env:
REACT_APP_AZURE_AD_KEY: ${{ secrets.REACT_APP_AZURE_AD_KEY }}
REACT_APP_AZURE_AD_REDIRECT_URI: ${{ secrets.REACT_APP_AZURE_AD_REDIRECT_URI }}
REACT_APP_GIS_APP_ID: ${{ secrets.REACT_APP_GIS_APP_ID }}
REACT_APP_TINYMCE_KEY: ${{ secrets.REACT_APP_TINYMCE_KEY }}
###### End of Repository/Build Configurations ######
close_pull_request_job:
if: github.event_name == 'pull_request' && github.event.action == 'closed'
runs-on: ubuntu-latest
name: Close Pull Request Job
steps:
- name: Close Pull Request
id: closepullrequest
uses: Azure/static-web-apps-deploy#v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_NEW_SUN_1185DE103 }}
action: "close"
Related
In my React JS app, my docker container is running at port 80 and I am trying to run my host also at port 80.
But, when I try to run the docker image, I am getting permission error because of which my pod is not executing.
It is failing with this issue:
Port: 80/TCP
Host Port: 0/TCP
State: Waiting
Reason: CrashLoopBackOff
Last State: Terminated
Reason: Completed
Exit Code: 0
I did the port mapping in package.json like this:
"scripts": {
"start": "export PORT=80 && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
I am also exposing the port in Dockerfile
FROM node:lts-alpine
ENV NODE_ENV=production
WORKDIR /usr/src/app
COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"]
RUN npm install --production --silent
RUN npm i #azure/msal-react
RUN mv node_modules ../
COPY . .
EXPOSE 80
RUN chown -R node /usr/src/app
USER node
CMD ["npm", "start"]
I have configured the envoirnment variable in .env file
PORT=80
And, my yml files looks like this:
apiVersion: v1
kind: Service
metadata:
name: <app name>
namespace: development
labels:
env: development
app: <app name>
spec:
ports:
- protocol: TCP
port: 80
targetPort: 80
selector:
env: development
app: <app name>
---
apiVersion: apps/v1
kind: Deployment
metadata:
name: <app name>
namespace: development
spec:
selector:
matchLabels:
env: development
app: <app name>
replicas: 3
template:
metadata:
labels:
env: development
app: <app name>
spec:
containers:
- name: <app name>
image: <image>:<version>
resources:
requests:
cpu: 100m
memory: 500Mi
ports:
- containerPort: 80
readinessProbe:
httpGet:
path: /
port: 80
periodSeconds: 3
timeoutSeconds: 1
imagePullSecrets:
- name: azurecontainerregistry
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
name: <app name>
namespace: development
annotations:
kubernetes.io/ingress.class: azure/application-gateway
appgw.ingress.kubernetes.io/ssl-redirect: "true"
spec:
tls:
- secretName: <certificate>
rules:
- host: <host address>
http:
paths:
- path: /
pathType: Prefix
backend:
service:
name: <app name>
port:
number: 80
I have gone through many links though nothing is helping. Looking for some suggestion.
When I am trying to run host port with 3000 docker container still fails.
Thanks
Please
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/ .
I have an ngnix kubernetes pod that I need to pass an .env file to but I can't get it to work.
Docker file for the pod:
FROM node:12-alpine as build-step
RUN mkdir /app
WORKDIR /app
COPY package.json /app
RUN npm install
COPY . /app
RUN npm run build
FROM nginx:1.17.1-alpine
COPY --from=build-step /app/build /usr/share/nginx/html
I've tried with to pass the env with the configmap:
apiVersion: v1
kind: ConfigMap
metadata:
name: test-front-app
data:
ENV_TEST: "TEST"
And with passing the env in the Deployment but neither worked.
edit the deployment file:
apiVersion: apps/v1
kind: Deployment
metadata:
labels:
app: test-front-app
name: test-front-app
spec:
replicas: 2
selector:
matchLabels:
name: test-front-app
template:
metadata:
labels:
name: test-front-app
spec:
imagePullSecrets:
- name: gcr-json-key
containers:
- name: front-test
image: gcr.io/PROJECT_ID/IMAGE:TAG
imagePullPolicy: IfNotPresent
ports:
- containerPort: 80
env:
- name: TEST_ONE
value: "test-value-one/"
envFrom:
- configMapRef:
name: test-front-app
Your ConfigMap test-front-app key can be accessed as env like below.
env:
- name: TEST_ONE
valueFrom:
configMapKeyRef:
name: test-front-app
key: ENV_TEST
In this way TEST_ONE variable with value of TEST will be passed to deployment.
I have created a workflow to build react app to the production.
name: Build and Deploy
on:
push:
branches:
- main
jobs:
build:
name: Build
env:
REACT_APP_ENV: live build
runs-on: ubuntu-latest
steps:
- name: Checkout Repo
uses: actions/checkout#master
- name: Install Dependencies
run: npm install
- name: Build
run: npm run build
- name: Archive Production Artifact
uses: actions/upload-artifact#master
with:
name: build
path: build
deploy:
name: Deploy
needs: build
runs-on: ubuntu-latest
steps:
- name: Checkout Repo
uses: actions/checkout#master
- name: Download Artifact
uses: actions/download-artifact#master
with:
name: build
path: build
- name: Deploy to Firebase
uses: w9jds/firebase-action#master
with:
args: deploy --only hosting:production
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
Build job is running correctly. But for the deploy, I got this error
Error: No project active, but project aliases are available.
Run firebase use with one of these options:
My .firebaserc file
{
"projects": {
"production": "gottamenu-admin",
"development":"gotta-menu-ap"
}
}
I follow instructions on the firebase repo for GitHub actions
If you have multiple hosting environments you can specify which one in the args line. e.g. args: deploy --only hosting:[environment name]
That's why I put args: deploy --only hosting:production
How do I fix this error in GitHub action?
Use deploy --only hosting:production if you want to deploy different sites (targets) on the same firebase-project
And your .firebaserc should look like
{
"projects": {
"default": "gottamenu-admin"
},
"targets": {
"gottamenu-admin": {
"hosting": {
"production": [
"gottamenu-admin",
],
"development": [
"gotta-menu-ap"
]
}
}
}
}
If you want to deploy to different firebase-projects
then your .firebaserc file is correct but
you should use deploy -P production or deploy --project production
This is my dockerfile used to building an image for kubernetes/openshift deployment:
FROM node:8.11.4
RUN mkdir /app
WORKDIR /app
COPY package.json .
RUN npm install
COPY src src
COPY public public
EXPOSE 3000
CMD ["npm", "start"]
The source code this app is cloned from: https://github.com/nodeshift-starters/react-web-app
This is my deployment yaml:
apiVersion: v1
kind: DeploymentConfig
metadata:
name: 'react-app'
labels:
app: 'react-app'
spec:
template:
spec:
initContainers:
- name: init-react
imagePullPolicy: IfNotPresent
image: "docker-registry.default.svc:5000/${NAMESPACE}/react-app"
command: ["sh", "-c"]
args: ["cp -n -r /app/* /tmp/app; sleep 1; ls -al"]
volumeMounts:
- mountPath: /tmp/app
name: react-storage-volume
containers:
- image: 'react-app:latest'
name: 'react-app'
securityContext:
privileged: false
ports:
- containerPort: 3000
name: http
protocol: TCP
resources:
limits:
memory: 500Mi
volumeMounts:
- name: react-storage-volume
mountPath: /app
volumes:
- name: react-storage-volume
persistentVolumeClaim:
claimName: "${pv_react}-claim"
metadata:
labels:
app: 'react-app'
replicas: 1
selector:
app: 'react-app'
triggers:
- type: ConfigChange
- type: ImageChange
imageChangeParams:
automatic: true
containerNames:
- 'react-app'
from:
kind: ImageStreamTag
name: 'react-app:latest'
The /app is mounted to nfs mount path : /mnt/k8sMount/react-data/.
The observation is whenever a change is done to src/App.js in the NFS mount path, it is getting updated to the pod(i have exec to the pod and checked its content) but when the web UI is refreshed in the browser the changes are not shown up.
Another observation is if changes to src/App.js inside the pod then upon web UI refresh in browser the changes appear.
Since I would want changes done to src/App.js in the NFS mount path to reflect in the web UI, please suggest to me if anything is wrong the deployment or if any alternative to achieve this. Thanks in Advance.