I'm using Google App Engine to host a VueJS App, and I'm trying to get my app to talk to my backend API.
I'm using an ENV Variable to declare the path to my API, however when the request is placed in GCP the url defaults to https://example.com/undefined/api/resource when it should be https://api.example.com/api/resource and also not have undefined.
As i'm getting the undefined error i suspect App Engine is not able to supply the VUE_APP_API_URL to the front end.
How do I get my VueJS app to find and use the env variable in app engine and use the correct api url?
Front end URL is like example.com
API URL is like api.example.com
Accessing the variable with process.env.VUE_APP_API_URL
app.yaml
runtime: nodejs10
env_variables:
VUE_APP_API_URL: "https://api.example.com"
handlers:
- url: /(.*\..+)$
static_files: dist/\1
upload: dist/(.*\..+)$
- url: /.*
static_files: dist/index.html
upload: dist/index.html
Related
I am using GCP App engine to host my Vue application. And in this application, I have a dynamic route defined as /imp/:id/:email/:type. In the email parameter I have a valid email with the format john#gmail.com. This type of request to the server is returning The requested URL /imp/****/john#gmail.com/gm was not found on this server. When I remove the . in the email the request is directed to the server correctly. My app.yaml is defined as follows:
runtime: nodejs14
service: frontend-app
handlers:
# Serve all static files with urls ending with a file extension
- url: /(.*\..+)$
static_files: dist/\1
upload: dist/(.*\..+)$
# catch all handler to index.html
- url: /.*
static_files: dist/index.html
upload: dist/index.html
I am using other workarounds like moving the email to a query parameter now but I would like to understand how I can fix this. Thank you,
I would like to use google cloud platform to host my website (some files with only html and some files with php). But it only shows the index.html page without any images and all the link are not working. I think my app.yaml file is not correct.
Case background:
I am using google cloud sdk in my mac.
gcloud app deply (this is the command to deploy my website)
Here with app.yaml file:
runtime: php55
api_version: 1
handlers:
- url: /.*
script: index.html
You need to add static_dir or static_files elements to handlers in your app.yaml.
Using static_dir, for example:
runtime: php55
api_version: 1
handlers:
- url: /
script: index.html
- url: /images
static_dir: images
I need to do rewrite a URL of my application like this: https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
I'm using Traefik as a reverse proxy and Docker Compose.
Here is my raw configuration in Docker:
application:
build: ./domain.app
volumes:
- ./domain.app/dist:/app
networks:
- net
labels:
- "traefik.frontend.rule=Host:domain.me"
- "traefik.port=8081"
- "traefik.backend=domain.me"
- "traefik.frontend.entryPoints=http,https"
With that configuration:
https://domain.me is working
https://domain.me/anything returns 404
How can I fix this rewrite rule?
For vue.js router history mode you want to catch all Routes that do not point to a resource on the server and forward them to your index.html. For Example:
https://example.com --> /index.html
https://example.com/route/to/subsite --> /index.html
But you still want to be able to access resources that are on the server. E.g.:
https://example.com/path/to/kitten.jpg --> /path/to/kitten.jpg not /index.html
In order to do that you have to find a Backend Server supporting Catch-All Fallback. You can use the ones noted in the vue.js Guide (Apache, Nginx, Node, IIS)
Why can't I use traefik for this?
As stated above you still want to be able to serve static resources. But traefik is just a router. It does only has access to the information of the request, not to the information of the server. But in order to decide if to serve the index.html or the static resource you must have access to the resources.
You could route all the traffic to the index.html using Traefik's PathPrefixStripRegex:but this would result in serving index.html for every request, even if you would have wanted kitten.jpg.
I'm working with Vue JS using the webpack template, and dev mode.
How can I have part of my server using the HTTPS protocol and other part using HTTP?
I know that to use HTTPS is just add "https: true" to the devServer variable of the file build/webpack.dev.conf.js . Example:
devServer: {
https: true,
// other variables...
}
But when I do that just the HTTPS requests are accepted, no HTTP anymore.
How can I work with both protocols? If it's not possible, is there a VueJS way to redirect an HTTP request to an HTTPS?
It doesn't look totally straightforward to configure multiple entry points on your webpack server. Your best bet is likely to reverse-proxy the http requests using whatever other webserver you have handy. IIS will do this for you, for example. Google "reverse proxy [name-of-your-webserver]" :-)
UPDATE:
Mixed Content: The page at 'https://myapp.herokuapp.com/#/employees'
was loaded over HTTPS, but requested an insecure XMLHttpRequest
endpoint
'http://api.geonames.org/countryInfoJSON?username=design1online'. This
request has been blocked; the content must be served over HTTPS.
I'm trying to call the below api from one of my app in heroku and I'm getting the below error
Do I need to add-on SSL?
I have even tried without http: something like this:
//api.geonames.org/countryInfoJSON?username=design1online
API call:
http://api.geonames.org/countryInfoJSON?username=design1online
Error:
failed to load resource: net::err_ssl_protocol_error
adding S to the http tag actually worked for me, I just had the issue today
<script src="https://maps.googleapis.com/maps/api/js?region=GB"></script>