Vue Storefront DigitalOcean Deployment
https://vuestorefront.io/blog/step-by-step-guide-deploying-vue-storefront-on-digitalocean
Following your guide makes the app build and deployment steps successful on DO but actually the app does not work. App is configured to run on 0.0.0.0:8080 (all interface) but the app is listening on a random IP for each deployment. I have attached the screenshots for your reference.
Guide to Deploying Vue Storefront on DigitalOcean | Vue Storefront
This guide is intended for developers who are familiar with both Vue Storefront and DigitalOcean and are looking to set up the eCommerce application on the cloud-based hosting service.
47 Replies
did you do this step?
Change the following variables with the URL of your Live website with the API route.
API_BASE_URL - <>/api
API_SSR_BASE_URL - <>/api
Save your changes. This will trigger redeployment.
DO is a bit tricky and it has issues with localhost.
reaplce 0.0.0.0:8080 with an actual hostname in your case
clownfish-app-....
let me know how it goesYup I did the following
VSF_NUXT_APP_PORT=8080
VSF_NUXT_APP_HOST=0.0.0.0
VSF_STORE_URL=https://0.0.0.0:8080
API_BASE_URL=https://clownfish-app-w67hw.on...../api
API_SSR_BASE_URL=https://clownfish-app-w67hw.on..../api
@skirianov so shall I change the VSF_NUXT_APP_HOST variable to app live url as well?
hmm....afaik no. I hope they haven't changed anything again -_-
Let me research a bit
I know who might help @fabianclemenz - you had something similar right?
what should be the health check route? tcp or http route /healthz?
Iβm currently on vacation but will come back to you on Monday π
We've set these:
and in the nuxt.config.js:
as well as:
Hello, Thank you for your reply. What value should be set for NODE_ENV ? production?
@fabianclemenz API_BASE_URL would be app liveurl/api?
@mirza5339 yeah, we set 'production' for production sites
@mirza5339 yes exactly π
I have tried the following but did not work
VSF_NUXT_APP_PORT=3000
VSF_NUXT_APP_HOST=0.0.0.0
API_BASE_URL=https://clownfish-app-w67hw.on...../api
API_SSR_BASE_URL=https://clownfish-app-w67hw.on..../api
The app is built and deployed successfully but the app url does not work
@fabianclemenz Can I ask you that the setup you did still work?
you have the server stuff in your nuxt.config.js
sure π
Yup the nuxt.config.js has the server stuff
@fabianclemenz do we have to remove https from server object? where the certs paths are defined for local setup?
nope we do have it in the API_BASE_URL included
certs are provided by digitalocean directly
do you have the trailing Slash ?
no
for health check do you use tcp or http? if its http what route it should be?
i didn't implement the health check myself
i used App Platform, connected to our gitlab repo (so it builds itself) and just did the settings mentioned above
Yup I did the same. I think default health check is through TCP.
@fabianclemenz @skirianov Removing the https config from the server object made the app work. Thank you for your help.π π
Huge thanks @fabianclemenz β€οΈ
ah ok you had
https://0.0.0.0?
@skirianov np πno
Do you know for the local setup we use local certs and add the https config for the server object in nuxt.config.js. Removing this https config made the app work. I was actually suspecting this as a culprit but did not remove it before.
i c π thanks for the clarification - for local setup we just use simple http π
The VSF docs suggest to use mkcert to install local certs for the local setup
mkcert is required only if you really need it. Otherwise it's optional π If it was confusing, can you please drop a link to that resource and I'll check it
Ok will send you the link, I think it does not say about mkcert or using certs as optional.
I have another question. I will be developing Paypal payment method for VSF. There is an official paypal SDK available for VUE js, so I think this SDK can be used with VSF because its compaitible with VUE JS?
I think so - i used
nuxt/auth-next to provide jwt authentication with nuxt - without problems πThank you
When I try to deploy on digital ocean I get many of the following errors:
@re-mxp is it building on your local machine?
Yep
@re-mxp can you please also state what is the node version your are using locally
I made following steps:
1. Installed Vue Storefront following this guide: https://docs.vuestorefront.io/v2/getting-started/installation.html.
2. I used the
package.json from following thread: https://discordapp.com/channels/770285988244750366/1152020806361170051/1152265560877437118 to make vue storefront node 18 compatible.
3. Adjusted the engines in package.json to node: 18.18.1 which is equal to my node version locallyGotcha. I don't have any instructions for that right now (in written format). I will be working on it soon. But in short, due to Node v18. You will need to run your Vue Storefront app in docker and deploy the docker image to DO
https://docs.digitalocean.com/products/app-platform/how-to/deploy-from-container-images/ - this is how to deploy the container
DigitalOcean
How to Deploy from Container Images | DigitalOcean Documentation
Deploy an application using a container image stored in your DigitalOcean Container Registry.
https://docs.docker.com/get-started/02_our_app/ - this is how to create a container of your app
Docker Documentation
Containerize an application
Follow this step-by-step guide to learn how to create and run a containerized application using Docker
I managed to fix it without docker container and by following the overview step in the migration guide of nuxt https://nuxt.com/docs/bridge/overview
But I tried to deploy it in docker and got the the same problem, so I could reproduce the problem locally, but only in the docker container. But after using Nuxt Bridge I could build it successfully locally and also in DigitalOcean without an own docker image
This is the dockerfile we use
Maybe it helps π
Thank you. π Would you be so kind to also share your
package.json?The main package json or the one from theme folder? (Weβre using the old custom-integration-boilerplate)
and our main package.json
The
build:digitalocean was previously used but not with deploying via docker
i hope that helps, if not feel free to ask πThank you very much. π
thank you @FabianClemenz β€οΈ
No problem π