I am running into an issue when trying to deploy a React website using Google Cloud Storage and a custom domain name.
I build my react app locally using npm run build.
Upload the build folder to a bucket with the name www.example.com. Upload a yaml that contains:
runtime: nodejs10
handlers:
- url: /
static_files: build/index.html
upload: build/index.html
- url: /
static_dir: build
Open cloud shell
run gsutil rsync -r gs://www.example.com ./example
run cd ./example
run gcloud app deploy
The app works great at the https://example-dot-projectname.uc.r.appspot.com url
The app is a blank page at the www.mycustomdomain.com
The console reads Loading failed for the <script> with source "http://www.mycustomdomain.com/static.js/###.chunk.js" twice
I also ran gsutil web set -m build/index.html gs://www.example.com and it did not work.
Any ideas?
Related
I have a nooby Directus question :
How to create an endpoint and attach it to my project ?
I try to follow the doc in vain :
Create a directus project
npm init directus-project example-project
SQLite / Admin / Password
cd example-project; npx directus start
I can access directus admin at http://0.0.0.0:8055/admin/content
CTRL+C
Create an endpoint
cd .., going away of my directus project, npm init directus-extension
endpoint / demo-directus-endpoint / javascript
Modifying endpoint / to /hello in src/index
cd demo-directus-endpoint; npm run build
Deploy extensions inside directus project
https://docs.directus.io/extensions/creating-extensions/
To deploy your extension, you have to move the output from the dist/ folder into your project's ./extensions/<extension-folder>/<extension-name>/ folder. <extension-folder> has to be replaced by the extension type in plural form (e.g. interfaces). <extension-name> should be replaced with the name of your extension.
cd ../example-project
mkdir ./extensions/endpoints/demo
cp -R ../demo-directus-endpoint/dist/index.js ./extensions/endpoints/demo
index.js looks like this :
"use strict";module.exports=e=>{e.get("/hello",((e,l)=>l.send("Hello, World!")))};
npx directus start
17:43:40 ✨ Loaded extensions: demo
17:43:40 ⚠️ PUBLIC_URL should be a full URL
17:43:40 ⚠️ Spatialite isn't installed. Geometry type support will be limited.
17:43:40 ✨ Server started at http://0.0.0.0:8055
Trying to get url http://0.0.0.0:8055/hello
curl http://0.0.0.0:8055/hello => {"errors":[{"message":"Route /hello doesn't exist.","extensions":{"code":"ROUTE_NOT_FOUND"}}]}
17:43:55 ✨ request completed GET 404 /hello 8ms
What to do in order to get Hello, World! when curl http://0.0.0.0:8055/hello ?
Thank you for your help
Answer found
curl http://0.0.0.0:8055/demo/hello => Hello, World!
Currently I'm trying to build container serving VueJS application via Cloud Native Buildpacks.
I already have working Docker file that builds VueJS in production mode and then copy results to nginx image, but I would like to try to use CNB.
So I just have created empty VueJS project for test via vue create vue-tutorial and trying to do with CNB somehting like described there https://cli.vuejs.org/guide/deployment.html#heroku but using CNB.
Does anyone know working recipe how to do that with CNB?
P.S. Currently I'm trying to build that with
pack build spa --path . \ SIGINT(2) ↵ 17:22:41
--buildpack gcr.io/paketo-buildpacks/nodejs \
--buildpack gcr.io/paketo-buildpacks/nginx
but getting next error (and I'm not sure that I'm on right way):
===> DETECTING
ERROR: No buildpack groups passed detection.
ERROR: Please check that you are running against the correct path.
ERROR: failed to detect: no buildpacks participating
ERROR: failed to build: executing lifecycle: failed with status code: 100
UPD
My current dockerfile
# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
# production stage
FROM nginx:1.19-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
We chatted about this in Slack, but I wanted to capture it here too:
pack build --buildpack heroku/nodejs --buildpack https://cnb-shim.herokuapp.com/v1/heroku-community/static yourimage
This command may do what you want. The static buildpack used in that example is not yet converted to a cloud native buildpack, but the shim may allow you to build a workable artifact. Then run your image with something like docker run -it -e PORT=5000 -p 5000:5000 yourimagename
I'm trying to deploy my static site to Azure storage but have been having issues getting the site open correctly even though the github action executes without errors and the files seem to be in place. In the browser, index.html seems to load along with the css and js.... but the site does not run properly. The console shows a failure in the js:
The odd thing is that I don't have any issues using the azure storage extension in vscode or using the azure cli:
az storage blob upload-batch --account-name <ACCOUNT_NAME> -d '$web' -s ./dist --connection-string '<CONNECTION_STRING>'
when I deploy from my laptop.
My github action looks like this:
name: Blob storage website CI
on:
push:
branches: [master]
pull_request:
branches: [master]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- name: npm install
run: |
npm install
- name: npm build
run: |
npm run build
- name: Azure Login
uses: azure/login#v1
with:
creds: ${{ secrets.AZURE_CREDENTIALS }}
- name: Azure CLI script
uses: azure/CLI#v1
with:
azcliversion: latest
inlineScript: |
az storage blob upload-batch --account-name <ACCOUNT_NAME> -d '$web' -s ./dist --connection-string '${{ secrets.BLOB_STORAGE_CONNECTION_STRING }}'
# Azure logout
- name: logout
run: |
az logout
based on this article here.
I thought that it might be due to the azure cli version, but none of the versions I've tried have made a difference.
Any ideas why my site broken using github action and azure cli to deploy?
For anyone interested - I was missing environment variables during the build process in the GitHub Action. I was able to pass these without checking in the .env files using github secrets.
There's now a step in the action to create a .env,
- name: Set Environment Variables
run: |
touch .env
echo ENVIRONMENT_VARIABLE=${{secrets.ENVIRONMENT_VARIABLE}} >> .env
and another to remove it:
- name: Remove Environment Variables
run: |
rm .env
I have a working Symfony 4.0.1 application running on PHP 7.1.14 (locally) that I would like to deploy to AWS Elastic Beanstalk using the EB CLI
I have a dist package of the application on my master git branch configured for production (vendor folder removed etc) that I am able to successfully deploy to Heroku. Now I need to deploy to AWS EB.
The AWS EB environment has already been set up (although I dont have access to the console). Some environment details are as follows:
Platform: arn:aws:elasticbeanstalk:us-east-2::platform/Tomcat 8 with Java 8 running on 64bit Amazon Linux/2.7.7
Tier: WebServer-Standard-1.0
At first, I was able to successfully deploy the application, but accessing the URL gave a 404 error for every page.
I did some googling and found a few articles describing the use of .config files. I have added one named 03_main.config with the following contents.
commands:
300-composer-update:
command: "export COMPOSER_HOME=/root && composer.phar self-update -n"
container_commands:
300-run-composer:
command: "composer.phar install --no-dev --optimize-autoloader --prefer-dist --no-interaction"
600-update-cache:
command: "source .ebextensions/bin/update-cache.sh"
700-remove-dev-app:
command: "rm web/app_dev.php"
Deploying with this .config file gives the following deployment failure error:
ERROR: [Instance: i-0c5f61f41d55a18bc] Command failed on instance. Return code: 127 Output: /bin/sh: composer.phar: command not found. command 300-composer-update in .ebextensions/03-main.config failed. For more detail, check /var/log/eb-activity.log using console or EB CLI.
I understand the purpose of .config files but do not understand what additional configuration is needed for get this Symfony app running.
I guess you should use the full path to composer like bellow :
100-update-composer:
command: export COMPOSER_HOME=/root && /usr/bin/composer.phar self-update -n
We use bitbucket pipeline for our angular 5 to deploy our code to GAE. We are ending up with the following exception. We use bitbucket pipelines the the CI/CD
THis is the pipeline code
image: node:9.11.1
pipelines:
custom:
default:
- step:
script:
- npm install -g #angular/cli#latest
- ng build --prod
- cp app.yaml dist
- ls dist
- cd dist
- curl -o /tmp/google-cloud-sdk.tar.gz https://dl.google.com/dl/cloudsdk/channels/rapid/downloads/google-cloud-sdk-190.0.0-linux-x86_64.tar.gz
- tar -xvf /tmp/google-cloud-sdk.tar.gz -C /tmp/
- /tmp/google-cloud-sdk/install.sh -q
- source /tmp/google-cloud-sdk/path.bash.inc
- echo $GCLOUD_API_KEYFILE | base64 --decode --ignore-garbage > ./gcloud-api-key.json
- gcloud config set project $GCLOUD_PROJECT
- gcloud components install app-engine-java
- gcloud auth activate-service-account --key-file gcloud-api-key.json
- echo $GCLOUD_API_KEYFILE > /tmp/client-secret.json
- gcloud config set project $GCLOUD_PROJECT
- gcloud app update --split-health-checks --project adtecy-ui
- gcloud app deploy app.yaml
I am looking to use node docker image to deploy angular 5 (version 5.2.11) app to GAE flex environment but it takes an unusally long time and the status is still "In Progress" (not sure the usual deploy time)
This is my app.yaml file
env: flex
runtime: python
threadsafe: true
readiness_check:
timeout_sec: 4
check_interval_sec: 5
failure_threshold: 2
success_threshold: 2
app_start_timeout_sec: 3600
I have given a very high timeout period because the previous push failed with a timeout
I believe GAE by default use python and hence we did not install python
Right now the deployment is running for about 20 mins or so but without letting us know any result. Could you guys help in deploying my app to GAE with minimal time?
EDIT:
Now we have got the result after running for 33 minutes
`21df82f90a72: Layer already exists
aeb4b6656589: Pushed
latest: digest:
sha256:c57d3178321c5f2721fc70cd00cb7862d469c74a6bf616ecfda760342c13af7e size: 3255
DONE
--------------------------------------------------------------------------------
Updating service [default] (this may take several minutes)...
.failed.
ERROR: (gcloud.app.deploy) Operation [apps/adtecy-
ui/operations/9c273f87-91a3-495a-b75d-0d6c767dce97] timed out.
This operation may still be underway.`
You can check the status of the deploy operation by running
gcloud app operations "apps/adtecy-ui/operations/9c273f87-91a3-495a-b75d-0d6c767dce97"
there seems to be an issue with running the app is nodejs environment. So I switched to python27 and I was able to successfully deploy it. But when I try to load using the app served in GAE it is throwing an error.
https://adtecy-ui.appspot.com
And here is my app.yaml (And I made some modifications too)
runtime: python27
api_version: 1
threadsafe: true
handlers:
# Routing for bundles to serve directly
- url: /((?:inline|main|polyfills|styles|vendor)\.[a-z0-9]+\.bundle\.js)
secure: always
redirect_http_response_code: 301
static_files: dist/\1
upload: dist/.*
# Routing for a prod styles.bundle.css to serve directly
- url: /(styles\.[a-z0-9]+\.bundle\.css)
secure: always
redirect_http_response_code: 301
static_files: dist/\1
upload: dist/.*
# Routing for typedoc, assets and favicon.ico to serve directly
- url: /((?:assets|docs)/.*|favicon\.ico)
secure: always
redirect_http_response_code: 301
static_files: dist/\1
upload: dist/.*
# Any other requests are routed to index.html for angular to
handle so we don't need hash URLs
- url: /.*
secure: always
redirect_http_response_code: 301
static_files: dist/index.html
upload: dist/index\.html