I am trying to create a serverless Nodejs application. I deployed my app to S3 and it is running. But the URL seems to be https://xxxxxxxx.xxxxx-api.us-west-2.amazonaws.com/prod. So, whenever my app is trying to get css files or video files or even the links they are going to URL/ which is perfect. But here the url is URL/prod, it should be like URL/prod/whichever-route-it-is So, my static files are not being rendered and even the links are not working. Is there any way to re route to URL/prod or remove the prod from api endpoint?
AWS API Gateway follows this pattern in the URL:
www.example.com/my-base-path/MyStage
You must configure each part accordingly. For example, you may create a base path "prod", and stage "whichever-route-it-is" for something like:
www.example.com/prod/whichever-route-it-is
Base Path Mappings are configured under Custom Domain Names.
Move the folders holding your static files into a /prod/ subfolder in S3.
Or, use Cloudfront to route /css/, /js/ or whatever static paths to the S3 bucket and skip API gateway
Or, configure API Gateway to overwrite the path for /css/, /js/ or whatever
I prefer moving files to the subfolder, or Cloudfront solutions. This allows control over different stages of the API. For example, when you are ready to launch v2, but not completely take down v1, you would want to have prod/ and prod_v2/ available. This way, your folder structure maps to the API Gateway stages nicely.
Related
I am having trouble serving my static files on Elastic Beanstalk using NodeJS deployed on Linux 2. My local environment works, but my deployment is unable to serve the static files located in a top-level static folder called 'public'.
My configuration is as follows:
option_settings:
aws:elasticbeanstalk:environment:proxy:staticfiles:
/images: public/images
/javascripts: public/javascripts
/stylesheets: public/stylesheets
I am certain that the configuration is processed correctly because I can view the results of the static file configuration within AWS UI. When I navigate to the home directory of my site (using http:// protocol), the HTML page is loaded, but the CSS and JS under the public directory is not. The error I get is as follows:
GET https://<domain name>/stylesheets/layout.css net::ERR_CONNECTION_TIMED_OUT
Note that the https:// protocol is used. From my understanding, the reason my local environment works is that my application serves the static files with the correct protocol. Here are my questions:
Why are my static files being served with protocol https:// when I request my home directory using http://?
I don't want to serve my static files through the application to reduce the number of requests to my application, noted here: https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/command-options-general.html#command-options-general-environmentproxystaticfiles. Is there anything actually wrong with the configuration?
Issue was resolved. I am using Helmet JS for Content Security Policy (CSP), and it has a directive for converting insecure requests to secure ones: upgrade-insecure-requests. Make sure to remove that in the development phase for a site that is relying on http:// for content. Best practice is to use https:// when possible.
I am trying to setup one parent domain (app.mydomain.com) for front for 2 web apps in the backend.
mail.mydomain.com and module.mydomain.com. I have implement path based routing. I need to routing to work so
app.mydomain.com/* points module1.mydomain.com
app.mydomain.com/module2/* points module2.mydomain.com/
Routing seems to work, however when browsing module2, it css and js are not loaded and the site doesnt work. accessing module2 directly works normally.
Have you routing rules to change your URL?
Since you are using App Gateway, the URL that your backend is seeing is (app.mydomain.com) instead of module2.mydomain.com.
So, maybe when you’re using the AppGateway, your backend is looking for a CSS into the wrong path…
I'm curious about an aspect of Google Cloud static hosting (via a bucket) and wonder if anybody here has knowledge of it.
Before I moved my website over to GCP, I used an .htaccess file to rewrite files such as index.html to display when requested without .html
I found that this looked better and would display my site as www.domain.com/index rather than www.domain.com/index.html
I also used my .htaccess file to forced http requests to https
I know this is impossible with GCP, as htaccess files won't be read in a bucket. I read that app.yaml file will do this same thing, however, it's my understand that app.yaml is used by an App Engine. I host my website in bucket, and use a load balancer to allow https request.
If I create an app.yaml file and place it in my bucket, is it possible to get the same results I had with htaccess? Anybody have any suggestions?
Thanks.
app.yaml is used to configure App Engine apps's settings [1]. For hosting a website in a bucket, it is not related. To achieve your goal, you can host your website in App Engine and configure the app.yaml.
As a workaround, you can have a javascript in your bucket to redirect to another URL [2].
I am new to nodejs/express/coding in general so my apologies if this isn't extremely clear. I am doing a code challenge for a job.
I have most of the project done. Part of the challenge is to have it uploaded to a bucket on S3. I created a bucket, that is all done. My problem is there needs to be a index.html in the root folder of the bucket (I think). All of my html pages (three of them) sit inside of the views directory. When I try to put my index.html in the root folder on cloud9, it says index.html can't be found in the views directory (obviously, since I moved it out). Can I set the views directory to be in the root folder?
Is there a way with express/nodeJS to have all of the files in the root folder? Or is there a way to keep my views folder as it is in Cloud9 and have everything run like it does from there, except in S3? I must be missing something. I am completely lost as to how to host this app on S3. Posting on here was my last resort! Thanks for any help.
Let's make order. Amazon S3 is a cloud file storage service. It can also be used to host static assets of a website.
From what I understand, you are building something with express, using the view directory, used in general for templates and so, I suppose, you are rendering your html pages by your express application. This is called server side rendering and is fully incompatible with amazon s3 that can only serve files.
Now, how can you resolve the problem (considering that you are obliged to use s3)? It depends.
If you are using express only to render your application and to serve static assets (so no API), you should consider some refactoring: in such case, you are basically building a web application without APIs. You don't need express. Maybe you are searching for a client side framework like Vue.js, React or Angular. To be more general, you should render your application client side.
If your express server is also acting as api server, you should divide your project. From one side you have your express api server, deployed somewhere. From the other side, you have your web app, client side rendered.
There is another solution: you could use a prerender like this to generate static assets from your express application. But if you are new to web developement, I advise you not to evaluate this option
When you move your static files to S3, you will need to setup the relative paths accordingly.
Can I set the views directory to be in the root folder?
No. Instead organize your files in S3 where index.html is the root and files with paths such as js/ css/ images/ taken from the root folder.
Note: Its important to understand that you cannot run NodeJS in S3 and instead you will be using the internal web hosting from S3 to serve the static content.
I have 3 servers running as a cluster managed by flynn (a bit like heroku) which I can attach a shared drive to so that in theory they all have access to the same files.
However I'm a bit unsure if it's possible to access a mounted drive from my nodejs app to save and access files.
Can anyone shed some light on if this is possible and roughly how I'd go about doing it.
With node.js, your file system path has literally nothing to do with the URLs that your server supports. node.js servers do not serve ANY files by default (unlike some other servers).
If you want an incoming browser request for http://example.com/uploads/test.jpg to read a file from /mnt/shared/uploads, then you have to create a web server route handler that includes the incoming path http://example.com/uploads/test.jpg and then reads the data from /mnt/shared/uploads and writes that data out as the http response.
Depending upon what web server environment you are using, there are helpers to do that mapping. For example, express has express.static() that helps with some auto mapping. But, the web server by itself does not server any files like this automatically.
So, if what you want is that all incoming requests for http://example.com/uploads/* will be read from /mnt/shared/uploads/*, then you can use express.static() to help you do that like this:
app.use("/uploads", express.static("/mnt/shared/uploads"));
This will take any path it finds after /uploads and look for that path in /mnt/shared/uploads. If found, it will automatically serve the content as static content.
So, it would work like this with the incoming URL shown first and the place express.static() would look for a matching file:
/uploads/test.jpg ==> /mnt/shared/uploads/test.jpg
/uploads/bob/test.txt ==> /mnt/shared/uploads/bob/test.txt