Deploy only the build artifacts of a Next.js project - node.js

I'm trying to deploy a Next.js project using a Docker image and I was wondering if it's possible to simply use an already generated dist folder (.next) and start the next.js server (npm run start) without having to trigger the build step again in the container.
The container will be hosted in AWS Elastic Beanstalk and I also want to avoid uploading the source code and installing the npm packages there, as I already have a CI pipeline that is generating the production artifacts.

Answering because I was going through issues with this myself and found this question. My research shows the only way to accomplish this is to run a docker environment on beanstalk and not node.js. The primary reason is that there are absolute paths in the .next build artifacts so you have to build on each instance and you have to make sure that BUILD_ID is synced across those instances.
If you CI pipeline can handle creating and pushing the Docker image, then its pretty easy to deploy on Beanstalk without any rebuilding etc. Hope that helps!

Related

Deploying a Vue app to Azure App Services with Azure Pipelines/releases

I'm trying to set up CI/CD with Azure pipelines to automatically deploy a frontend vue application, but am having trouble with deploying my frontend application from it.
When deploying manually from the VS Code IDE it works fine, with the /home/site/wwwroot looking as expected in the kudu file explorer:
However when it's deploying from Azure Pipelines, it seems that the zip file remains zipped and is stored in another directory within /home/site/wwwroot/Package (e.g /home/site/wwwroot/Client/.zip), resulting in the application being unable to
This is what it looks like in the kudu powershell debugger:
My pipeline and release is pretty standard. The steps are:
Uses Node 16.x
Downloads a .env file
Copies the .env file to the directory (/client) the application is in.
runs npm install
runs npm run build
archives the dist directory that is generated from the run build command
Publishes the archived dist folder as an artifact
An Azure release is then created and deploys the artifact to the correct Azure App Service. Currently the deployment method is set to default, although I have tried each of the different deployment methods (Web deploy, Zip deploy, and Run from package) but none have worked so far.
I've downloaded the resulting zip file from the pipeline deployment, unzipped and manually deployed (using VS Code) the dist folder within which was successful, so I'm quite sure that the pipeline part of the process which installs, builds, and packages the application is working as expected, but something is going wrong during deployment.
If anyone has any ideas of what the error may be, or is able to offer any help/sugestions, it would be greatly appreciated.
Thank you.
Ensure that the archive job option for "prepend root folder name to archive paths" is disabled in the pipeline.
Also ensure the Package or folder route in the release's deploy job is correct. It should be something like:
$(System.DefaultWorkingDirectory)/______ClientPipeline/ArtifactName/*zip

index.html not found while deploying MERN app to render.com

I was trying to deploy my MERN based E-commerce website on render.com, after the render terminal shows the build was successful the the webpage shows the error as,
{“message”:“ENOENT: no such file or directory, stat ‘/opt/render/project/src/frontend/build/index.html’”,“stack”:null}
I’m a complete beginner to render and MERN too,
I have no bulid folder in my local
then I tried to create another test app by npx create-react-app test to check if build folder is actually present in there or not, But it is not there, I’m totally in Confused now…
I’m Giving my repo here → stunning spark
I just want to have clear answers for my questions(Please!!!)
Things I want to change in my directory to deploy and host my app Successfully.
Things Need to be configured in the render’s settings
Thanks in Advance!!!
I just want to deploy and host my application on render.com
Just run npm run build into your frontend folder and do check you have removed the "build" keyword from the .gitignore file because it won't let you push the build folder to GitHub and you are good to go.

Angular Universal - Deploying to AWS Elastic Beanstalk

I have been trying and failing for over three days now to get this working, and am growing increasingly frustrated with my own lack of understanding on the topic - so this is my search for an answer that I've not yet found.
I am using Angular 9.x and Angular Universal 9.x and am unable to work out how to deploy this to Elastic Beanstalk on a server running node. There are zero tutorials that explain how this should be done, as they are all aimed at those wanting to use Lambda on AWS. If someone could please point me in the right direction that would be great. I run npm run build:ssr --prod, and get the following in my dist folder:
[
I have tried deploying this folder by uploading it zipped, as well as tried eb deploy with my whole app - but all of these result in errors like the following (for eb deploy method)
> blush-front-end#0.0.0 start /var/app/current
> ng serve
sh: ng: command not found
Could someone please point me in the correct direction?
I struggled for months too because of the lack of tutorials online on how to deploy Angular Universal to AWS Elastic Beanstalk. And you will now be very happy to know how easy it is.
First, run the command npm run build:ssr to build for production.
Inside the dist folder, you will probably find a folder with your project name. Inside this folder you will find a "browser" folder and a "server" folder. Inside the "server" folder it is the main.js file.
Your setup might be slightly different, but you will be able to adjust this explanation to your situation after you read my entire answer.
Zip the dist folder.
Let's now configure the environment in AWS Elastic Beanstalk.
1) When you create an environment in Elastic Beanstalk, choose "Web server environment", and then on Platform branch config, choose the last option: "Node.js running on 64bit Amazon Linux". This is a very important step, since this is the only option that will enable you to configure the Container Options.
2) On the Application code, choose "Upload your code" and upload your zip file.
3) Click on Configure more options
4) Click on the Edit button on the Software box.
5) On the Node command field,type node dist/yourProjectFolderName/server/main.js
That's it!! Save and create your environment. Your app will work now. :-)

How to use NPM to package a deployment?

I've developed an Angular website that lives in a Node-based project. Gulp is used to build sources into development and production versions of the site. The project includes an ExpressJS server that can serve either the dev or prod versions of the files. Now I want to build and deploy the site in CI fashion.
I have a private NPM registry that I'm able to publish the entire project module to. The easy route would be:
In the build environment, check out the project repository
npm install
pass tests
npm publish
In the production environment..
npm install project
build for production
Run the server over the newly built prod files
But this doesn't seem right. Shouldn't I output the production files as part of the build process, and publish these as a versioned artifact with NPM? Are there acceptable, different ways to publish an NPM module for development and deployment?
Or am I stuck building my sources in the production environment? Doesn't this defeat the purpose of NODE_ENV=production?
It depends where you are hosting your server.
If you want to deploy to heroku, you can follow https://devcenter.heroku.com/articles/getting-started-with-nodejs#introduction and install the gulp build task https://github.com/appstack/heroku-buildpack-nodejs-gulp. Basically, you will push the version you want to deploy to heroku's git server and it will automatically trigger the build process for dev or prod and start the express server. Assuming you are already using git for your project, it is only a matter of adding a new remote.
If you want to deploy to Amazon's elastic beanstalk, it's a little bit more complicated but it all boils down to pushing your application code to the service and this will trigger the build process in the host instance.
If you want to deploy it on your environment you could still use git push and git hook to trigger the deployment. Check out How can I automatically deploy my app after a git push ( GitHub and node.js)? for various implementations.
As for your question "Shouldn't I output the production files as part of the build process, and publish these as a versioned artifact with NPM": you could, but this is not what most people do. As long as your build process is repeatable, there is no reason to package and publish the built version of your app. I am assuming here that your are building an application and not a reusable library in which case it would be a different story.

Build and deploy or deploy to build

My application is based on node.js, and uses bower.js and others task runners to compile assets and build the actual assets (minify, concat, inject...).
Since this is my first application that will be running in a scalable enviroment on Heroku, I was wondering how is the process of deploying.
I mean, my current workflow is:
cd myRepo
git commit [blabla...]
git push heroku
And when running it, it runs npm run wich calls geddy and runs the server.
If I build before pushing, there will be files that are kind of redundant, but if I push the unbuilt project, it should build it on the cloud. Is that the main idea?
Thanks
it should build it on the cloud. Is that the main idea?
Correct; checkout the Dev Center for more Nodejs information:
Heroku Dev Center: Getting Started with Nodejs
Specifically here, it lists information on bower:
Heroku Node.js Support: Customizing the Build Process

Resources