Premise / What I want to achieve
I'm deploying a Nuxt.js app in SSR mode on Google App Engine.
At the time, the favicon is no longer displayed, so I want to be able to display it.
yarn build + gcloud app deploy
By the way, it was displayed without any problem with the following command.
yarn dev
yarn build + yarn start
Corresponding source code
export default = {
head: {
link: [
{ rel: 'icon',
type: 'image/x-icon', href: 'images/favicon.ico' }
]
}
}(nuxt.config.js)
runtime: nodejs12
instance_class: F2
handlers:
- url: /_nuxt
static_dir: .nuxt/dist/client
secure: always
- url: /(.*\.(gif|png|jpg|ico|txt))$
static_files: static/\1
upload: static/.*\.(gif|png|jpg|ico|txt)$
secure: always
- url: /sw.js
static_files: static/sw.js
upload: static/sw.js
- url: /.*
script: auto
secure: always
- url: /images/favicon.ico
static_files: static/images/favicon.ico
upload: static/images/favicon.ico
- url: /assets
static_dir: assets
env_variables:
HOST: '0.0.0.0'
PORT: '8080'(app.yaml)
I placed the favicon.ico under the static / images directory.
From the command you are running, you do not appear to be declaring the app.yaml file when deploying the app.
yarn build + gcloud app deploy
Try:
gcloud app deploy app.yaml --project [project-id]
Please have a look into the App Engine Official Documentation regarding how to set the Favicon.ico
The Vuejs apps are managed as static websites by App Engine as Vue runs on the front-end.
Therefore you would need to configure the app.yaml to use static files.
app.yaml:
env_variables:
HOST: "0.0.0.0"
PORT: "8080"
handlers:
- url: /favicon\.ico
static_files: static/favicon.ico
upload: static/favicon.ico
- url: /sw.js
static_files: static/sw.js
upload: static/sw.js
- url: /static
static_dir: public
- url: /.*
script: auto
secure: always
Please have a look into the following App Engine documentation for static files in App Engine.
Related
I would like to run serverless offline using a Lambda function that points to a Docker image.
When I try to run serverless offline, I am just receiving:
Offline [http for lambda] listening on http://localhost:3002
Function names exposed for local invocation by aws-sdk:
* hello-function: sample-app3-dev-hello-function
If I try to access http://localhost:3002/hello, a 404 error is returned
serverless.yml
service: sample-app3
frameworkVersion: '3'
plugins:
- serverless-offline
provider:
name: aws
ecr:
images:
sampleapp3image:
path: ./app/
platform: linux/amd64
functions:
hello-function:
image:
name: sampleapp3image
events:
- httpApi:
path: /hello
method: GET
app/myfunction.py
def lambda_handler(event, context):
return {
'statusCode': 200,
'body': 'Hello World!'
}
app/Dockerfile
FROM public.ecr.aws/lambda/python:3.9
COPY myfunction.py ./
CMD ["myfunction.lambda_handler"]
at the moment such functionality is not supported in serverless-offline plugin. There's an issue open where the discussion started around supporting this use case: https://github.com/dherault/serverless-offline/issues/1324
I am trying to deploy cube.js project using serverless framework on aws and when I access the endpoint produced by serverless, it results in the following error on the browser
Cannot GET /
Here is my serverless.yml file
service: cloud-analytics
provider:
name: aws
stage: production
runtime: nodejs8.10
iamRoleStatements:
- Effect: "Allow"
Action:
- "sns:*"
- "athena:*"
- "s3:*"
- "glue:*"
Resource:
- "*"
vpc:
securityGroupIds:
- sg-xxxxxxxxx # Your DB and Redis security groups here
subnetIds:
- subnet-xxxxxxxxx
environment:
CUBEJS_AWS_KEY: ${opt:awsKey}
CUBEJS_AWS_SECRET: ${opt:awsSecret}
CUBEJS_AWS_REGION: us-east-1
CUBEJS_AWS_S3_OUTPUT_LOCATION: ${opt:location}
REDIS_URL: ${opt:redis_url_with_port}
CUBEJS_DB_TYPE: athena
CUBEJS_API_SECRET:XXXXXX
CUBEJS_APP: "${self:service.name}-${self:provider.stage}"
NODE_ENV: ${self:provider.stage}
AWS_ACCOUNT_ID:
Fn::Join:
- ""
- - Ref: "AWS::AccountId"
functions:
cubejs:
handler: cube.api
timeout: 30
events:
- http:
path: /
method: GET
- http:
path: /{proxy+}
method: ANY
cubejsProcess:
handler: cube.process
timeout: 630
events:
- sns: "${self:service.name}-${self:provider.stage}-process"
plugins:
- serverless-express
I have followed this steps in this blog to set up NAT https://medium.com/#philippholly/aws-lambda-enable-outgoing-internet-access-within-vpc-8dd250e11e12
Cube.js file is as follows with server core options
const AWSHandlers = require('#cubejs-backend/serverless-aws');
const AthenaDriver = require('#cubejs-backend/athena-driver');
module.exports = new AWSHandlers({
externalDbType: 'athena',
externalDriverFactory: () => new AthenaDriver({
accessKeyId: process.env.CUBEJS_AWS_KEY,
secretAccessKey: process.env.CUBEJS_AWS_SECRET,
region: process.env.CUBEJS_AWS_REGION,
S3OutputLocation: process.env.CUBEJS_AWS_S3_OUTPUT_LOCATION
})
});
When I run the endpoint
https://xxxxx.execute-api.us-east-1.amazonaws.com/production/
which is produced by the serverless api gateway I get the error
Cannot GET /
On Cloudwatch I see the cubejs lambda being invoked and see logs for start and end request id. I dont see any logs on cubejsProcess lambda.
Where/How can I debug this to see where the issue is?
By default in production mode Cube.js disables dev server capability and it's why you don't see any Playground working at / path: https://cube.dev/docs/deployment#production-mode. Please use REST API to test your deployment: https://cube.dev/docs/rest-api.
I am setting up a full-stack application with nuxt js running my client-side code, express js running my api, and mysql as my database. To run all of these processes I have been using docker, more specifically docker-compose. After much configuration, I have gotten all three images to run together. There is one problem though, I cannot figure out how to make calls to my api with nuxt/axios.
I have tried many different tactics. My express api is available to the "outside-world" at http://localhost:8080, so I set up my axios baseURL to reflect that. I ran some test axios gets in some nuxt js middleware, and kept getting a connection refusal error. I finally figured out that I could use docker-compose networks to connect my frontend and backend, so I remapped my axios baseURL to http://api:8080 (api is the name of my docker-compose image), and in the axios request in the nuxt js middleware, it worked like a charm. Later, I was writing some code, and I wanted to send an axios request in a vue method. Even though the axios requests in the middleware were working with this baseURL, this new axios request in the method gave the error
commons.app.js:434 OPTIONS http://api:8080/api/v1/get/colors net::ERR_NAME_NOT_RESOLVED
I tried changing my axios baseURL back to localhost, and now the axios request in the methods works, but the axios request in the middleware doesn't work.
docker-compose.yml
version: "3.3"
services:
mysql:
container_name: mysql
image: mysql:5.7
environment:
MYSQL_USER: ${MYSQL_DEV_USER}
MYSQL_PASSWORD: ${MYSQL_DEV_PASSWORD}
MYSQL_DATABASE: ${MYSQL_DEV_DATABASE}
MYSQL_ROOT_PASSWORD: ${MYSQL_DEV_ROOT_PASSWORD}
ports:
- 3306:3306
restart: always
volumes:
- mysql_data:/var/lib/mysql
- ./database/create_db.sql:/docker-entrypoint-initdb.d/create_db.sql
- ./database/insert_db.sql:/docker-entrypoint-initdb.d/insert_db.sql
api:
container_name: api
depends_on:
- mysql
links:
- mysql
build:
context: ./backend
dockerfile: Dockerfile-dev
environment:
NODE_ENV: development
MYSQL_USER: ${MYSQL_DEV_USER}
MYSQL_PASSWORD: ${MYSQL_DEV_PASSWORD}
MYSQL_DATABASE: ${MYSQL_DEV_DATABASE}
MYSQL_HOST_IP: mysql
PORT: ${API_PORT}
HOST: ${API_HOST}
expose:
- 8080
ports:
- 8080:8080
volumes:
- ./backend:/app
command: npm run dev
frontend:
container_name: frontend
depends_on:
- api
links:
- api
build:
context: ./frontend
dockerfile: Dockerfile-dev
environment:
NUXT_PORT: 3000
NUXT_HOST: 0.0.0.0
NODE_ENV: development
GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID}
API_HOST: api
API_PORT: ${API_PORT}
API_PREFIX: ${API_PREFIX}
expose:
- 3000
ports:
- 3000:3000
volumes:
- ./frontend:/app
command: npm run dev
volumes:
mysql_data:
nuxt.config.js
axios: {
baseURL: 'http://api:8080/api/v1'
},
nuxt middleware
export default async function({ app, redirect, error }) {
try {
const response = await app.$axios.$get('/auth/login')
if (!response.success) {
throw new Error(response.message)
}
redirect('/admin')
} catch (err) {
console.log(err)
await app.$auth.logout()
error({ message: err.message, statusCode: 500 })
}
}
nuxt method
methods: {
async test() {
const colors = await this.$nuxt.$axios.$get('/get/colors')
console.log(colors)
}
}
Thank you all so much!
P.S. This is my first stack overflow question!
Nuxt's Axios module offers two configuration options for URL prefixes, one for server and one for the browser.
axios: {
baseURL: 'http://api:8080/api/v1',
browserBaseURL: 'http://localhost/8080/api/v1'
},
I want to develop a Vue app and serve it to external domain.
So I wrote a vue.config.js to redirect development server to public like below:
module.exports = {
devServer: {
disableHostCheck: true,
host: '0.0.0.0',
port: 8080,
public: 'mypublicpage.com:8080',
},
publicPath: '/'
}
Just before few hours ago, I got the expected result of above setting file like this
App running at:
- Local: http://localhost:8080
- Network: http://mypublicpage.com:8080/
But now my Local port is always randomized, so I can't access my Vue app through the public(Network) URL. I still don't know why this happens.
App running at:
- Local: http://localhost:19282 port changes on every npm run serve
- Network: http://mypublicpage.com:8080/
I have created a PWA using vue js 2.0 and framework7 and also use Webpack for bundling. I want to use browser-sync to share my project.
I used this config in my webpack.confg file :
new BrowserSyncPlugin({
// browse to http://localhost:3000/ during development,
// ./public directory is being served
host: 'localhost,
port: 3000,
server: { baseDir: ['src'] }
}),
In src/ I have my basic files like index.html, app.vue, app.js.
After using npm run dev command I see this result :
[Browsersync] Access URLs:
----------------------------------
Local: http://localhost:3000
External: http://192.168.1.118::3000
----------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
----------------------------------
[Browsersync] Serving files from: src
After this, localhost:3000 open in my browser and say browsersync: connected but it have showed me a blank page.
Also after I enter website path (http://localhost:3000/en/#!/login) in browser, it showed me Cannot Get /en Error. What is the problem?
Any help will greatly appreciated.
Based on your comment, looks like you are also using webpack-dev-server. In that case you can proxy to it:
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
module.exports = {
// ...
devServer: {
port: 3100
}
// ...
plugins: [
new BrowserSyncPlugin(
// BrowserSync options
{
// browse to http://localhost:3000/ during development
host: 'localhost',
port: 3000,
// proxy the Webpack Dev Server endpoint
// (which should be serving on http://localhost:3100/)
// through BrowserSync
proxy: 'http://localhost:3100/'
},
// plugin options
{
// prevent BrowserSync from reloading the page
// and let Webpack Dev Server take care of this
reload: false
}
)
]
}