I'm new to GoogleCloud.
I've followed the tutorial (for Node.js) with these steps:
Build my own My-Hello-World web app
Deploy to AppEngine
It works fine as https://My-Hello-World.appspot.com
Build my own EndPoints APIs with project-id as My-Hello-World
Deploy to AppEngine
It also works fine as https://My-Hello-World.appspot.com/api/test/*
My problem is the moment I deploy EndPoints APIs, my My-Hello-World.appspot.com doesn't run as webapp anymore, it responses as APIs. How to config to make my project run for both webapp and api when deploy to AppEngine?
https://My-Hello-World.appspot.com --> run as webapp
https://My-Hello-World.appspot.com/api/test/* --> run as api
Thank you.
So assuming that
Your Endpoints API and Webapp are in the same GCP project
Each has their own app.yaml
You can deploy them to the same project's app engine and have them run together as separate services. All you will need to do is add a service tag in your app.yaml
service: api
runtime: nodejs
env: flex
env_variables:
NODE_ENV : staging
This is what mine looks like for a ExpressJS RestAPI that I deploy to staging.
You can keep the web-app's app.yaml the same, because it will be used as the default service.
Then you will be able to access
Webapp
https ==> my-hello-world.appspot.com
http ==> my-hello-world.appspot.com
API
https ==> api-dot-my-hello-world.appspot.com
http ==> api.my-hello-world.appspot.com
Reference
How Requests are Routed
Configuring your app with app.yaml
Related
I am deploying ReactTs App to Azure App service by Azure Extension of Visual Studio Code.
Although it has been successfully deployed, but at the endpoint of the deploy link,
there is no change (the initial default interface of the App service).
This is the endpoint of the deploy link:
https://test-appservice-nev.azurewebsites.net/
At the endpoint provided by kudu (it shows the deployed ReactTS app), the display is correct. I don't understand why is that.
https://test-appservice-nev.scm.azurewebsites.net/wwwroot/
Post adding the below Startup command customer is able to see the published changes while he is browsing to the web app URL.
pm2 serve /home/site/wwwroot --spa --no-daemon
You can refer to this documentation for more information about React deployment on the app service.
I'm triying to deploy a frontend app with Reac, the repository is hosted in github so I'm using github actions to continuous implementation.
The github actions says that the build and deploy are working correctly but when I tried to use the url http://<>.azurewebsites.net
enter image description here
it return 503 error "The service is unavailable"
You need to setup the (enterprise) application registry for this app to reflect what it does. Else the App Service cannot serve your application.
Look for the Platform Configuration in authentication blade.
I'm absolutely new to Azure, CI, and CD.
I have an app consisting of a frontend developed under React + Typescript which sends CRUD requests to a typescript backend. Both front and end are NPM projects.
I've no idea on how to step from development environment to production, deploying to Azure.
Should I create two separate AppServices, one for each project?
If that's the case, how do I then connect them?
Do I just need to change the URL the server listens to?
As you can see I've no idea of what I'm doing but I'm eager to learn so any feedback is much appreciated
The most common approach is
Deploy frontend app ( react ) in one app service.
Backend nodejs app on a different app service.
Then, call the api of the nodejs app from the frontend.
Or,
Set up and run the client and server on the same server using a gulp file and deploy that project on an app service. In that case, there is no cross-site communication. This is the most preferred one.
Using the same app service for both front end and back end application. Refer nodeexpress-backend-with-angular-front-end-in-a-single-azure-web-app.
Using Cors to connect front end and backend Check here
Refer SO Link 1 & Link 2
And You can use deploy staging slots in app service to use different environment like (test/dev, Production).
I have a react native app that I'm building using expo. For the backend, I am using node.js and Express.
My app hierarchy is such that I have a frontend folder and a backend (server) folder. For example,
Root
|
|Frontend
|Various screens & associated files
|Server
|Routes & other files
For my project, is it possible to just host the backend and not the rest of the app? Such that when I fetch data in the frontend using HTTP requests, instead of routing through localhost (http: //RandomIP:PORT/route) I would use the heroku address as the routing address. I would also host the SQL database along with it.
I tried to follow along with the Heroku documentation, but it seemed like that was for hosting the entirety of the app / web apps instead of mobile, and I ran into constant errors.
I would like to point out that, unlike web pages, mobile apps cannot be hosted on the server and fetched on-demand. In other words, do not try to upload your react-native code to Heroku instead just upload your backend only and then make HTTP requests through the URL provided by Heroku after you have deployed your code.
Therefore go into your backend codebase, initialize a git repository and just deploy that Heroku. Also, you will need to host your SQL database on another service such as Google's Cloud SQL or Amazons AWS Database Services.
I am deploying a React.js front-end (built with create-react-app) and a back-end with a CRUD API that connects to Cloud SQL.
Is this a good way?
React.js front-end is a default service.
Back-end API is backend service
I'm familiar with deploying to Heroku, which had front-end and back-end on different ports. Would that work for App Engine?
This is all in Node.js.
I don't see any issues with the described design.
To get you on track you can take a look in Stack Overflow thread How to deploy create-react-app to Google Cloud or the following tutorial.
You can run applications on different ports with setting port forwarding in your app.yaml file.
The design pattern is good.
You only need to create a dispatch.yaml file which is only one per project.
Your dispatch.yaml file would look something like this:
dispatch:
- url: "*/backend/*"
service: backend
Then your frontend at project-id.appspot.com will simply make requests to https:/project-id.appspot.com/backend/ *, and these requests will be redirected to the API service.