How to properly deploy node apps to GAE with secret keys? - google-app-engine

I am exploring GAE with nconf and I'm wondering if the following setup is secured after I deploy an App.
What concerns me is are both my "config.dev.json" and "config.prod.json" files deployed despite including them in ".gitignore".
I am unsure what information is passed along to gae (I don't want my config keys exposed) after I do:
$ git add .
$ git commit -m 'Commiting'
$ glcoud app deploy
My Node App structure looks like this:
- /myProject
- /node_modules
- .gitignore
- app.js
- app.yaml
- config.js
- keys.dev.json
- keys.prod.json
- package-lock.json
- package.json
// .gitignore
node_modules
keys.dev.json
keys.prod.json
// config.js:
const nconf = require("nconf");
nconf.argv().env();
if (nconf.get("NODE_ENV") === "production") {
nconf.file("keys.prod.json");
} else {
nconf.file("keys.dev.json");
}
...

Including files in .gitignore has no implications whatsoever on deployment on GAE, that file is only used by git.
If you want to prevent deployment of a file to GAE you need to use the skip_files option in your app.yaml file's General settings:
skip_files
Optional. The skip_files element specifies which files in the
application directory are not to be uploaded to App Engine. The value
is either a regular expression, or a list of regular expressions. Any
filename that matches any of the regular expressions is omitted from
the list of files to upload when the application is uploaded.
For example, to skip files whose names end in .bak, add a
skip_files section like the following:
skip_files:
- ^(.*/)?\.bak$
Side notes:
if I understand correctly, your app uses those files, so it appears to me like you will have to deploy them together with your app.
even if a file is deployed on GAE it is your app's responsability (and complete control) in deciding if the file is exposed to ouside requests or not.
if you want to know exactly which files are included in the deployment you can see them displayed during deployment by using the --verbosity option for the gcloud app deploy command.

Related

Typeorm + Firebase functions: "No connection options were found in any orm configuration files" after deployed

Env:nodejs12
Folder structure:
#root
/functions
/src
...
/models
/resolvers
index.ts
ormconfig.json
package.json
tsconfig.json
...
.firebaserc
firebase.json
Everything worked when developing in local environment. After deployed to firebase functions, No connection options were found in any orm configuration files shows up.
What might be the cause?
I'll update with more information if needed.
=========================================
update
Below is the folder structure of deployed codes. (Cloud functions can't show more than 50 files so I downloaded the source code from GCP)
As you can see the ormconfig.json does exist in the root, but somehow it cannot be located. I have to create connection manually with typeorm.createConnection({type: "postgres",...}) to make the code work.
This is likely being caused by a known bug with app-root-path (which TypeORM uses for config file resolution) when used in conjunction with Google Cloud Functions.
The workaround / fix that worked for me was to set the environment variable APP_ROOT_PATH to /workspace when I deployed my Google Cloud Function (app-root-path will short-circuit when it sees that variable).

Google Cloud Bucket and ReactJS app Access

Using ReactJS I made a Build (reactJs static, npm build) and uploaded it to Google Cloud Storage Bucket, but getting a issue with the Path and Build folder files. The app (/static website) running but could not fetch the files from the bucket directory for eg the index.html & logo. (404 or 403 error )
Structure: Parent Bucket > Build folder (index.html, static folder & other files inside Build)
Any one have any suggestion on this. How to resolve this?
Do I need to create an app.yaml for GCS Bucket or any alternative?
I have gone through the article quite similar but for AppEngine instead of Bucket. https://medium.com/google-cloud/how-to-deploy-a-static-react-site-to-google-cloud-platform-55ff0bd0f509.
I have tried with app.yaml file but does not work for me.
I had exactly the same issue as mentioned by the OP. I am sharing my version of solution just in case anyone else ends up here.
As shown in the screenshots by OP, the 403 errors showed up for me because the URL of the static files in build/static folder was not correctly configured by the react-scripts build script.
Eg:
The url for index.html file was https://storage.googleapis.com/{bucket-name}/index.html.
However, when the page loaded, it requested files having url https://storage.googleapis.com/static/js/main.f555c3e0.chunk.js. It should rather be
https://storage.googleapis.com/{bucket-name}/static/js/main.f555c3e0.chunk.js
This is happening because by default react-scripts build assumes that your files will be served from root folder of your host.
To fix this add the following field in package.json of your project
"homepage": "https://storage.googleapis.com/{bucket-name}"
This tells the build script that it needs to add a relative path for serving static files.
For details please refer: https://create-react-app.dev/docs/deployment/#building-for-relative-paths
In order to set the routes of a static website stored in Google Cloud Storage, you need to assign a suffix to your objects. In other words, using suffixes is the intended way to configure your website. You can see more information in Hosting a static website document.
For your main index page you should set MainPageSuffix and for the not found page 404.html you should set NotFoundPage as suffix.
You can see more information on how to configure your static web here

Base Directory for a module in App Engine yaml file

I started working with App Engine today and I am trying to find a way to set a root folder for each of my modules/services. Example:
Folder Structure
/mod1/*
/mod2/*
dispatch.yaml
app.yaml
mod1.yaml
mod2.yaml
Is it possible to set the base directory for a module in App Engine yaml file?
Something similar to RewriteBase / in apache. This way in my mod1.yaml I dont have to specify the mod1 directory 30 time for each endpoints.
Maybe a commend in the dispactch.yaml
- url: "api-dot-lyreka-com.appspot.com/"
module: api
path: /mod1 -- Just for example. Something like that
I have been looking for a couple hours now.
Just move the module .yaml files inside the respective module dir which makes that module dir become the "root" of the module, so you don't need to specify it anymore. More details here:
Run Google App Engine application with microservice
New project structure for Google App Engine
Note: each module only sees what's inside its "root" dir, nothing above it is deployed when the module is deployed. But you can symlink stuff in each of the module dir to share it across modules: Sharing entities between App Engine modules

Multi Tenant App in React

I'm building a multi tenant app in React (with Webpack setup via base, dev and prod config files), and I'm wondering the best way to create and access per-tenant variables.
When I run my app with:
npm run start tenant1
I am able to access tenant1 in Webpack by using this:
const tenant1 = process.argv[process.argv.length -1];
However, now I'm wondering what is the best way to make that variable globally accessible. My hope is to use that variable to the create a folder structure within the app along the lines of:
/app/${tenant}/img/
/app/${tenant}/css/
/app/${tenant}/components/
Ideally without having to import a variable into every single javascript file.
Any suggestions or links to existing setups would be greatly appreciated.
Update Jan 2019:
I've found a way to achieve this with Create-react-app, not perfect but it works and achieves the following:
Run a React app on port 3000 that works for multiple domains simultaneously.
Forward all requests not handled by React to a back end.
Optionally use SSL in development.
Create-react-app has a proxy option that is very easy to setup. Simply add the following line to your package.json file:
"proxy": "http://localhost:5000"
However, this will not work for multiple domains. There is a more advanced proxy configuration available.
After following these steps, you will be able to control where different requests are sent, but it does not entirely provide the ability to proxy multiple domains - to achieve this:
Create the file .env in the root of your create-react-app project.
Add the following to it:
NODE_PATH=src/
DANGEROUSLY_DISABLE_HOST_CHECK=true
# optionally add this line for SSL in development
HTTPS=true
From the advanced proxy instructions above, you should end up with a file called setupProxy.js in the root of your /src folder - change to the following:
const proxy = require('http-proxy-middleware')
const options = { target: 'https://[::1]:8000', secure: false }
module.exports = function(app) {
app.use(proxy('/api', options))
app.use(proxy('/graphql', options))
}
The magic part is the https://[::1]: 8000, which will forward all domains from the root request to the same back end. This doesn't seem to be well documented anywhere, but I believe it is the IPv6 equivalent of 127.0.0.1.
After this, you can add entries to your hosts file (for example: 127.0.0.1 some-domain.example.com), and in your React app use just the paths (/api or /graphql) and requests should be proxied to the same domain as the browser is running on.
Original answer:
I ended up taking a fairly manual approach to this.
I'm using a react/redux boilerplate, but I've modified the npm scripts like so:
"start:tenant1": "cp -r ./tenants/tenant1 ./app/tenant && cross-env NODE_ENV=development node server",
"start:tenant2": "cp -r ./tenants/tenant2 ./app/tenant && cross-env NODE_ENV=development node server",
Each tenant folder is copied to the app when the development server is run with the relevant command, and files are named the same within each tenant folder (masthead.svg, vars.js, etc) so that imports throughout the app can be static.
Mostly this works because I'm not using a node server in production, a static build folder is generated by the boilerplate.
Hope this helps someone.

Grails 3.0 static html in run-app

similar questions have been asked before, regarding grails 2(.3, .4). I find it strange that i could not find a way to do this, as it seems a standard use-case to me.
I simply want to serve html-pages, including their linked .css and .js (angular and jquery content) when i run grails run-app.
I want to check if my http-calls are handeled correctly on both sides - without needing to deploy a .war and configuring a database.
afaik grails run-app simply starts a jetty/tomcat - both of which can obviously serve .html pages. What do i have to do to make the grails development-tooling deploy my files?
I need to make http-requests,
so using a different Server would violate JS-SOP,
while deploying the .war would greatly slow down the development process
I've so far only found clunky jsonp, proxy, .war deployment solutions, or solutions for grails 2.x
I tried placing the files literally everywhere in the projects' structure (/src/main, /src/main/resources, /src/main/public, the assets folder and its subfolders, created web-app directories in every subdirectory, the Init, domain, conf directories - you name it)
Add the index.html to src/main/resources/public
Then add this to UrlMappings.groovy:
"/"(redirect:"/index.html")
For grails >= 3.0.12
Location of static resources
In order to resolve an issue around how POST requests are treated for
REST applications on non-existent resources, static resources located
in src/main/resources/public are now resolved under the /static/** URI
by default, instead of the base URI /**. If you wish to restore the
previous behaviour add the following configuration:
grails.resources.pattern = '/**'
https://github.com/grails/grails-core/releases/tag/v3.0.12
Contrary to the accepted answer, you don't need a redirect. I have made able to make this work with the following config:
UrlMappings.groovy
"/"(uri: "/index.html")
application.yml
grails:
resources:
pattern: '/**'
Finally, you just need to have your index.html file located under src/main/webapp

Resources