We are using AWS amplify to develop our next.js application for the first time and trying manual deployment process. We are getting following error when we try to run "amplify publish".
This error is frustrating because there is no stack trace to figure out what is causing the issue. I can see the artifacts were successfully loaded to S3 bucket. But deployment fails.
Error:
Export successful
✔ Zipping artifacts completed.
✖ Deployment failed! Please report an issue on the Amplify Console GitHub issue tracker at https://github.com/aws-amplify/amplify-console/issues.
An error occurred during the publish operation
I tried to manually upload the zipped file using the "drag and drop". It feels like its stuck with the message Your build is being queued.... for hours now.
Any help is highly appreciated. This is a huge blocker for us.
I fixed this issue.
first run this command
amplify configure project
after set 'out' to Distribution Directory Path like this.
Distribution Directory Path: out
configurations.png
Try to put static content on S3 manually.
For example, if you have generated static contents in the dist/ directory using nuxt generate, run the following command:
aws s3 sync dist/ s3://{YOUR_BUCKET_NAME}
If this solves your problem then try to use CodeCommit for your amplify project until this gets fixed.
GitHub issue: https://github.com/aws-amplify/amplify-console/issues/1369
We resolved the above issue. The issue was with the IAM policies. Once we fixed the role policies we were able to publish and see the progress of the deployment.
https://docs.amplify.aws/guides/hosting/nextjs/q/platform/js/
1) SSG Only:
Inside package.json
"scripts": {
"build": "next build && next export",
...
}
Run this command.
amplify configure project
Then, keep every thing the way it is, except this:
Distribution Directory Path: out
2) SSG & SSR:
Inside package.json
"scripts": {
"build": "next build",
...
}
Run this command.
amplify configure project
Then, keep every thing the way it is, except this:
Distribution Directory Path: .next
Note:
Do not forget to change the Image in index.js, because currently AWS does not support next/image.
https://docs.amplify.aws/guides/hosting/nextjs/q/platform/js/#deploy-and-host-an-ssg-only-app
Related
I am having a hard time getting my app to come up on Heroku after deploying a VUE JS application. It keeps giving me a Not Found page (even when everything builds)
After looking over a lot of suggestions on Stack Overflow and videos, I finally figured it out. The first think you want to do is go to the command line and type: Heroku Logs, when I did this, I saw this:
Error: ENOENT: no such file or directory, stat '/app/client/build/index.html'
After some research, I found out that when the vue cli builds, it places it assets in a folder called 'dist" and not build. In my server.js file, I just changed my entry to
if(process.env.NODE_ENV === 'production')
{
//Set static folder (our public folder)
app.use(express.static('client/dist'));
app.get('*',(req,res) => {
res.sendFile(path.resolve(__dirname,'client','dist','index.html'));
})
}
It "used to have" 'build' in it, 'build' is actually used if you are deploying a "React" application (which have done on a previous build). After I changed this to 'dis', MY APP CAME UP .. !!! YAHHHHH!!!
I'm trying to do some work for a client, but cannot get their bigcommerce site running locally. I have installed stencil CLI (v3.1.1) and downloaded the theme from the bigcommerce dashboard (all files). from the root of the theme i ran "stencil init", then "npm i" and "stencil start".
when i run stencil start, it throws an error saying there's no config.json file.
this is the error i get
How do i generate the config.json file?
The only config file I see is config.stencil.json.
I have also tried running "stencil pull" in hopes that it would pull the config, but it throws another error: "not ok -- Error: Could not fetch active theme details for channel 1: Request failed with status code 404"
Stencil-cli version:
3.1.1
Node version:
12
NPM version:
6.14.15
OS:
mac big sur
Stencil 3.1.1 has been deprecated for some time now. I believe the current version is 3.8. As of 4 months ago, anything below 3.5 will not run (https://developer.bigcommerce.com/changelog#publications/required-stencil-cli-version-set-to-3-5-0).
If you don't have a config.json file in your project, you will need to get the one from the client's store. Try downloading their theme again. It should come through.
Edit: It is possibly the case that you need a new API token. Try making a new one for your store. Make sure the following scopes are set:
Themes: Modify
Settings & Information: Modify
Sites & Routes: Read-only (or Modify)
Documentation for creating a new API account: https://support.bigcommerce.com/s/article/Store-API-Accounts#creating
Summary:
I have created projects, with Vue.js and Nuxt.js, where I have installed aws-amplify (which automatically installs aws-sdk) in order that I can implement authentication with AWS Cognito.
In both cases, this works very nicely, but the problems come when I build production versions.
In both cases, I end up with massive bundle sizes which (thanks to webpack-bundle-analyzer) I can immediately see are caused by the aws-sdk which appears to contain code to implement every AWS service, under the sun, despite the fact that I am only importing AWS Cognito's: "Auth" (import { Auth } from 'aws-amplify')
I have tried creating a custom AWS SDK for JavaScript, which only includes the service: AWS.CognitoIdentity, but despite incorporating that (presumably incorrectly), I still end up with the same bundle size (and aws-sdk files) when I build the projects.
As I say, this is happening in both Nuxt and Vue project, but in order to simplify this, I for now just want to find the solution to a very basic sample project created with Vue.
I think I must be doing something dumb, but I can't work out what that is.
Any help would be greatly appreciated! :-)
Steps to reproduce:
Create a basic Vue.js project with defaults. Run: vue create vue-aws-sdk-inv
[Note: Steps 2 - 4, are not crucial to reproduce issue, but install webpack-bundle-analyzer which provides useful extra info.]
In the new project, install webpack-bundle-analyzer. Run: npm install --save-dev webpack-bundle-analyzer
Create root file: vue.config.js
Add the following code to vue.config.js:
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
module.exports = {
configureWebpack: {
plugins: [new BundleAnalyzerPlugin()]
}
};
As a benchmark, build the project. Run: npm run build
At this stage, the project will build (with no console warnings) and webpack-bundle-analyzer will launch (in the browser) showing the file: chunk-vendors..js, at the top of the tree, containing a bunch of other .js files, all of acceptable size.
Install AWS Amplify (and by default aws-sdk). Run: npm i aws-amplify
Open src/components/HelloWorld.vue and add the following under the tag: import { Auth } from "aws-amplify";
Build the project. Run: npm run build
At this stage, the project will build WITH console warnings regarding the following files being too large:
File Size Gzipped
dist/js/chunk-vendors.013ac3f0.js 3055.78 KiB 550.49 KiB
dist/js/app.fa2a21c4.js 4.67 KiB 1.67 KiB
dist/css/app.53019c4c.css 0.33 KiB 0.23 KiB
If installed, webpack-bundle-analyzer should launch (in the browser) showing an inflated: chunk-vendors..js, due to a hefty: aws-sdk.
aws-sdk will include api: .json files and lib: .js files for every AWS service I can think of!
The attempt to rectify:
Navigate to: https://sdk.amazonaws.com/builder/js/
Clear all services.
Select just: AWS.CognitoIdentity
Download "Minified" aws-sdk-.js
Download "Default" aws-sdk-.min.js
[Note: the following are the steps I am guessing I'm getting wrong?...]
In the project, search the node_modules directory for aws-sdk.js and aws-sdk.min.js.
They were found in /node_modules/aws-sdk/dist
Replace both files with the downloaded files (renaming to aws-sdk.js and aws-sdk.min.js respectively.)
Build the project. Run: npm run build
Project will build with same console warnings and same massive aws-sdk, as before, containing all the same .js and .json files for a bunch of services that are not actually imported in the application.
Final pieces of analysis:
Remove aws-sdk.js and aws-sdk.min.js from project's: /node_modules/aws-sdk/dist
Build the project. Run: npm run build
Project is built without even referencing these files.
Rename /node_modules/aws-sdk to /node_modules/TEMP_aws-sdk and attempt to build the project.
Build fails, and this proves (I think) that I was at least trying to add the custom versions, of aws-sdk.js and aws-sdk.min.js, somewhere in the correct directory!
Source Code:
vue.config.js:
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
module.exports = {
configureWebpack: {
plugins: [new BundleAnalyzerPlugin()]
}
};
src/components/HelloWorld.vue:
import { Auth } from "aws-amplify";
As said before, any help would be greatly appreciated! :-)
It looks like import { Auth } from "aws-amplify"; doesn't currently allow for tree shaking according to this issue.
Reading through several related issues, it appears that:
import Auth from '#aws-amplify/auth';
is the best you can currently do. I suspect that over time, the AWS team will figure out a way to better separate the internals.
For readers looking for a way to reduce bundle sizes for the aws-sdk package, see this section of the docs.
In my case:
import S3 from 'aws-sdk/clients/s3';
import AWS from 'aws-sdk/global';
cut the bundle size down by quite a lot. That gets it down to ~57k gz to use S3.
Also, for anyone using nuxt you can just run nuxt build -a to get the build analyzer.
I built my app using Vue CLI3 with PWA. When I build for production the service worker fails to register.
I then decided to check if it was something I did or Vue CLI 3 out the box. I built a brand new app, built it and deployed it to AWS s3 with cloudfront. Even the brand new app without any changes fails to register the service worker with error: "The script has an unsupported MIME type ('text/plain')." and "Error during service worker registration: DOMException"
I've tried quite a few things other than listed below that google search results suggested but I end up with the same error.
I tried using the vue.config.js to load a custom worker in which I just copied the contents of the one that vue produces in a build.
pwa: {
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: 'public/service-worker.js'
},
themeColor: '#ffffff'
}
I have tried loading it from index.html also.
If I host it locally it registers without any issues
The file does get created and it's accessible from the console but for some odd reason unknown to me it does not want to register at all.
Has anyone had this problem before and how did you resolve this?
Hosted on AWS s3 & cloudfront with HTTPS enabled and using the default AWS certificates for testing.
$ vue --version
3.9.3
$ node --version
v12.7.0
$ npm --version
6.10.0
UPDATE
I found that when I upload to S3 using aws cli sync it changes all .js files content-type
Once I resolve this I will update my question again.
I've created a new site using Gridsome deployed with Netlify, but I can't get the site to appear when accessed. Instead, Netlify says:
Page Not Found
Looks like you've followed a broken link or entered a URL that doesn't exist on this site.
< Back to our site
I tried updating my build settings based on the instructions of the creator of the Gridsome starter template I'm using, but the site still doesn't display. I've also updated the js-yaml version.
I've gone through the questions/answers for similar questions on here, but I haven't been able to figure this out. I'm new to web development, and I'm sure I'm missing one or more things contributing to the issue.
My GitHub repo for this site.
The site.
I have the build log from Netlify. There are some errors in it. I don't want to put too much here, so here's a part from the end of the log.
12:18:36 PM: failed during stage 'building site': Build script returned non-zero exit code: 1
12:18:36 PM: Error running command: Build script returned non-zero exit code: 1
12:18:36 PM: Failing build: Failed to build site
12:18:36 PM: Finished processing build request in 55.729813394s
A Gist for the whole build log.
Thanks so much for your help, #talves!
I was having trouble using the build commands because of being new to cli stuff and a permissions issue. I asked a friend about the build errors I was getting from Netlify, and he recommended I try removing and re-installing my node modules. Did that, still didn't work. I tried removing anything in the repo having to do with "journal" since Failed to render /journal kept appearing in the build log, but that didn't work either.
I googled ReferenceError: _objectSpread is not defined after update since that was in the build log after the journal error. I found a comment on an issue noting the same error message in the main Babel GitHub repo that suggested adding the following to the package.json file:
"resolutions": {
"#babel/core": "^7.5.4"
}
I added it, tried to build again, and it still failed but only gave me one error message it didn't show before—Error: SyntaxError: Unexpected string in JSON at position. I googled that message and got another issue on GitHub. A comment on the issue noted a missing comma.
I went back to my package.json file and found that I didn't add a comma to the bracket above the new "resolutions" snippet. I added the comma, tried to build again, and it worked 🤜💥✨ !
Sorry if this is long-winded! I thought it might be good to include my process on figuring this out in case others run into the same issues.