Here's the app.yaml code to serve static build files to gcloud
runtime: nodejs16
entrypoint: yarn start
handlers:
# Serve all static files with url ending with a file extension
- url: /(.*\.js)
mime_type: text/javascript
static_files: public/build/\1
upload: public/build/(.*\.js)
- url: /(.*\.json)
mime_type: application/json
static_files: public/build/\1
upload: build/(.*\.json)
expiration: "1h"
- url: /(.*\.css)
mime_type: text/css
static_files: public/build/\1
upload: public/build/(.*\.css)
# Serve all static images with url ending with a image extension
- url: /(.*\.png)
mime_type: image/png
static_files: public/build/images/\1
upload: public/build/images/(.*\.png)
expiration: "7d"
# Catch all handler to index.html
- url: /.*
static_files: public/index.html
upload: public/index.html
This is my public build structure to deploy on gcloud
Getting 404 not found for the required static files.
These are the scripts commands:
"scripts": {
"start": "serve -s public",
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
}
Related
I have a frontend project that was containerized by docker and docker-compose.yml, a few months ago. It was good and can automatically refresh the page localhost:8080 after I made the code changes, Below shows the main code,
docker-compose.yml
client:
build:
context: ./client
dockerfile: ./docker/local/Dockerfile
restart: on-failure
volumes:
- ./client:/app
- /app/node_modules
networks:
- myapp
nginx:
restart: always
depends_on:
- api
volumes:
- static_volume:/app/staticfiles
- media_volume:/app/mediafiles
build:
context: ./docker/local/nginx
dockerfile: Dockerfile
ports:
- "8080:80"
networks:
- myapp
nginx configurations
upstream client {
server client:3000;
}
server {
location /ws {
proxy_pass http://client;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
}
location / {
proxy_pass http://client;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
}
}
.env file
WDS_SOCKET_PORT=0
FAST_REFRESH=false
CHOKIDAR_USEPOLLING=true
app.jsx
import React from "react";
const App = () => {
return (
<div className="App">
<h1>Hello World</h1>
</div>
);
};
export default App;
package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#reduxjs/toolkit": "^1.8.2",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^14.2.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-redux": "^8.0.2",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
}
After I make code changes, I can get into the container, and the code does change inside and volume is working. I have no idea why the front end package will not refresh as it was few months ago. I re-installed docker and switched a new pc, but no luck still.
Can anyone provide me some insights?
This is the issue of webpack, if we add WATCHPACK_POLLING=true to the .env file, the auto refresh will be working properly.
I know this comes up often, but I've tried the usual remedies:
"homepage": "/admin/v2" in the package.json
<base href="%PUBLIC_URL%/"> in the index.html
<BrowserRouter basename='/admin/v2'>
These things work for my development environment, but not for production. I'm pretty sure the issue is in my nginx.conf for the microservice, that sits behind the ingress-nginx controller.
It is:
server {
listen 4001;
root /usr/share/nginx/html;
index index.html index.htm;
location / {
try_files $uri $uri/ /index.html;
}
}
Note: This is an example for my local dev cluster, but the issue is exactly the same regardless.
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
annotations:
kubernetes.io/ingress.class: "nginx"
cert-manager.io/cluster-issuer: "letsencrypt-dev"
nginx.ingress.kubernetes.io/ssl-redirect: "true"
nginx.ingress.kubernetes.io/configuration-snippet: |
rewrite ^(/admin)$ $1/ permanent;
name: ingress-dev
namespace: dev
spec:
tls:
- hosts:
- localhost
secretName: tls-localhost-dev
rules:
- host: localhost
http:
paths:
- path: /
pathType: Prefix
backend:
service:
name: client-cluster-ip-service-dev
port:
number: 3000
- path: /admin
pathType: Prefix
backend:
service:
name: admin-cluster-ip-service-dev
port:
number: 4000
- path: /admin/v2
pathType: Prefix
backend:
service:
name: admin-v2-cluster-ip-service-dev
port:
number: 4001
- path: /api
pathType: Prefix
backend:
service:
name: api-cluster-ip-service-dev
port:
number: 5000
Also, the package.json and index.html:
{
"name": "admin-v2",
"version": "0.1.0",
"private": true,
"homepage": "/admin/v2",
"dependencies": {
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"#testing-library/user-event": "^12.8.1",
"#types/jest": "^26.0.20",
"#types/node": "^12.20.4",
"#types/react": "^17.0.2",
"#types/react-dom": "^17.0.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
"typescript": "^4.2.2",
"web-vitals": "^1.1.0"
},
"scripts": {
"start": "PORT=4001 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<base href="%PUBLIC_URL%/">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
At any rate, I'm pretty sure the issue lies in the nginx.conf so I'm continuing to mess with it, but thought I'd post to see if someone knows what the solution is.
Thanks!
EDIT: Not getting anywhere, but continuing to try. My Dockerfile would probably helpful as well:
FROM node:14-alpine as builder
WORKDIR /app
COPY ./package.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx
EXPOSE 4001
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/build /usr/share/nginx/html
As you can see, all of the contents of /app/build get copied over to /usr/share/nginx/html. I have verified in the container that all the assets are there and in a subdirectory called: /static/ which is where ./css and ./js are.
Ok, figured it out... the problem was in the nginx.conf:
server {
listen 4001;
root /usr/share/nginx/html;
index index.html index.htm;
location / {
try_files $uri $uri/ /index.html;
rewrite ^/admin/v2/?(.*) /$1 break;
}
}
We're trying to deploy our MERN stack app to Google's App Engine. Before we were using flex environment, but to enable redirecting to https every time, we switched to Standard env. After this change, we encountered a few problems, such as: sometimes our main ('/') page doesn't load, for some users the website remains unsecured and:
Uncaught SyntaxError: Unexpected token '<'
What could be the solution to fix all of these problems?
Below I'm attaching code snippets.
Our code structure looks like:
client
| - build
| - src
| - package.json
| - ...
routes/api
package.json
server.js
app.yaml
...
client/package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:5000",
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
Package.json:
"scripts": {
"client-install": "npm install --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client",
"test": "jest"
},
App.Yaml:
runtime: nodejs12
automatic_scaling:
max_instances: 2
resources:
cpu: .5
memory_gb: 0.5
disk_size_gb: 10
handlers:
- url: /.*
secure: always
redirect_http_response_code: 301
script: auto
- url: /
static_files: client/build/index.html
upload: client/build/index.html
secure: always
- url: /
static_dir: client/build
secure: always
In our server.js we have:
if (process.env.NODE_ENV === 'production') {
console.log('production')
app.use(express.static(path.join(__dirname, '/client/build')))
app.get('/*', (req, res) => {
res.sendFile(path.join(__dirname, '/client/build/index.html'))
})
}
const port = process.env.PORT || 5000
app.listen(port, () => console.log(`Server running on port ${port}`))
I made a very simple gatsby site with AWS Amplify tho, site map was not created by 'gatsby-plugin-sitemap'.
[package.json]
{
"name": "web_matching",
"version": "1.0.0",
"private": true,
"description": "web_matching",
"author": "uekyo",
"keywords": [
"gatsby"
],
"scripts": {
"develop": "gatsby develop",
"start": "gatsby develop",
"build": "gatsby build",
"serve": "gatsby serve",
"clean": "gatsby clean"
},
"dependencies": {
"gatsby": "^2.26.1",
"gatsby-plugin-sitemap": "^2.11.0",
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
}
[gatsby-config.js]
module.exports = {
siteMetadata: {
title: "web_matching",
siteUrl: `https://amp.d1aw1cuurv9iud.amplifyapp.com`,
},
plugins: [
{
resolve: `gatsby-plugin-sitemap`,
options: {
output: `/sitemap.xml`,
}
}
]
};
[amplify.yml]
version: 1
frontend:
phases:
preBuild:
commands:
- yarn install
build:
commands:
- yarn build
artifacts:
baseDirectory: public
files:
- '**/*'
cache:
paths:
- node_modules/**/*
Do you guys have the same experience? By the way, if I enter the sitemap URL, it's moved to a top page automatically. However, it works on localhost. The problem seems to be in Amplify.
Running locally with gatsby develop will not serve up the sitemap.
You must run under production mode by running gatsby build && gatsby serve
Then the sitemap should be available via http://localhost:9000/sitemap.xml
I am triying to deploy an application created using CRA with Typescript into the Google Cloud App Engine service, however, for some reason, the appspot link keeps loading forever until a 502 Bad Gateway appears (the error appears sometimes, normally it just keeps loading..)
I've already checked several tutorials and questions without success.
Deploy create-react-app on Google App Engine
https://medium.com/tech-tajawal/deploying-react-app-to-google-app-engine-a6ea0d5af132
The app.yaml is the following:
env: flex
runtime: nodejs
handlers:
- url: /static/js/(.*)
static_files: build/static/js/\1
upload: build/static/js/(.*)
- url: /static/css/(.*)
static_files: build/static/css/\1
upload: build/static/css/(.*)
- url: /static/media/(.*)
static_files: build/static/media/\1
upload: build/static/media/(.*)
- url: /(.*\.(json|ico))$
static_files: build/\1
upload: build/.*\.(json|ico)$
- url: /
static_files: build/index.html
upload: build/index.html
- url: /.*
static_files: build/index.html
upload: build/index.html
env_variables:
REACT_APP_DEV_API_URL: "......"
REACT_APP_MAP_API_KEY: "........"
# [END app_yaml]
Logs of the app engine (It seems it's calling the 'npm run start' command each time I open a page)
Of course, my application works fine in dev mode and also it doesn't seem to be any problem in the deployment logs.
If someone has experienced this problem before, please let me know how to solve it. Thanks in advance.
package.json:
{
"name": "testing-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"#types/google-map-react": "^1.1.5",
"#types/jest": "^24.0.0",
"#types/lodash": "^4.14.149",
"#types/node": "^12.0.0",
"#types/react": "^16.9.0",
"#types/react-dom": "^16.9.0",
"#types/react-helmet": "^5.0.15",
"#types/react-router-dom": "^5.1.3",
"#types/styled-components": "^5.0.0",
"#types/swiper": "^5.2.1",
"axios": "^0.19.2",
"google-map-react": "^1.1.6",
"lodash.differenceby": "^4.8.0",
"lodash.throttle": "^4.1.1",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-circular-progressbar": "^2.0.3",
"react-dom": "^16.12.0",
"react-id-swiper": "^3.0.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"semantic-ui-react": "^0.88.2",
"styled-components": "^5.0.1",
"swiper": "^5.3.6",
"typescript": "~3.7.2"
},
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^2.14.0",
"#typescript-eslint/parser": "^2.14.0",
"cross-env": "^6.0.3",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-config-prettier": "^6.9.0",
"eslint-config-react-app": "^5.1.0",
"eslint-plugin-import": "^2.19.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-react-hooks": "^2.3.0",
"gh-pages": "^2.2.0",
"jest": "^24.9.0",
"lint-staged": "^9.5.0",
"pre-commit": "^1.2.2",
"prettier": "^1.19.1"
},
"lint-staged": {
"*.js": [
"npm run lint:eslint:fix",
"git add --force"
],
"*.json": [
"prettier --write",
"git add --force"
]
},
"pre-commit": "lint:staged",
"resolutions": {
"serialize-javascript": "^2.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"build:clean": "rimraf ./build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint:staged": "lint-staged",
"lint:eslint": "eslint --ignore-path .gitignore",
"lint:eslint:fix": "eslint --ignore-path .gitignore --fix",
"prettify": "prettier --write"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
The project structure is the typical CRA with containers-components (Ignore the nginx.conf and dockerfile which I was using for testing another way with Gcloud run at the time of the photo)
Edit: Added project structure and package.json
Solved (May 18, 2020)
I changed my approach and go for a custom runtime and it worked out.
Here is the configuration I used if anyone encounter this problem in the future.
Change the runtime to custom in the App.yaml
<!-- language: lang-html -->
env: flex
runtime: custom
And include a Dockerfile with a nginx.conf for the runtime management
Dockerfile:
FROM node:8-alpine as react-build
WORKDIR /app
COPY . ./
RUN npm install
RUN npm run build
# server environment
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/configfile.template
ENV PORT 8080
ENV HOST 0.0.0.0
RUN sh -c "envsubst '\$PORT' < /etc/nginx/conf.d/configfile.template > /etc/nginx/conf.d/default.conf"
COPY --from=react-build /app/build /usr/share/nginx/html
EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]
nginx.conf
server {
listen $PORT;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri /index.html;
}
gzip on;
gzip_vary on;
gzip_min_length 10240;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml;
gzip_disable "MSIE [1-6]\.";
}
This configuration appears in one of the tutorials here: https://cloud.google.com/community/tutorials/deploy-react-nginx-cloud-run
Thank you to #Nibrass H for suggesting some possible solutions.