search

vuejs / vitepress

Vite & Vue powered static site generator.
https://vitepress.dev
MIT License
12.6k stars 2.05k forks source link

How to manage multiple vitepress website with azure static web app using base url ? #2386

Closed kai-you2 closed 1 year ago

kai-you2 commented 1 year ago

Overview

We have multiple service we want to have documentation using vitepress, I know we can easily deploy the website using static web app, but it seems impossible to host those documentation site under one domain with base url ?

What I need is something like

Is that possible using azure static web app? If not, I am considering using azure app service, since it provide virtual application which may seems to fit in these kind of situation, but in this case, how do we host a website in azure web app with vitepress ? since it didn't have a nodjs server

brc-dd commented 1 year ago

but it seems impossible to host those documentation site under one domain with base url

What's the issue you're encountering? It should be straightforward to build those projects and deploy them 👀 (azure static web apps should work fine IMO)

PS: Ah, you might need to configure separate outDir in both of your projects.

kai-you2 commented 1 year ago

Hi @brc-dd , thanks for taking interesting answering the problem, I posted a more detailed article at https://stackoverflow.com/questions/76050387/how-to-deploy-my-vitepress-to-azure-static-web-app-with-base-url

Majorly the problem would be how to configure base url to static web app, I tried to set the outDir for the projects to be /web/ui after posting the article, but in my github workflow, I still need to set the app_location to be .vitepress/dist/web/ui in order to find the index.html, which seems to be pointless since it's still treat / as it's root url, I want to be able to point one domain to multiple vitepress projects with different base url for my client

ex: http://companydomain/web/ui/ --> A project http://companydomain/web/sdk/ --> B project http://companydomain/web/doc/ --> C project

brc-dd commented 1 year ago

Ah, I'll try to share an example. It's might be hard to explain this way.

The basic approach is:

After you've build all three projects, you'll have a dist directory like this:


dist/web/
├─ ui/
├─ sdk/
├─ doc/

You then will need to upload dist to Azure. (For this to work, you need to have all three projects in the same repo. You can use submodules too if they are big, but they all need to be built in the same workflow for the dist to have all three of them.)

kai-you2 commented 1 year ago

Hi, thanks for your answer. But if I upload the dist, the azure static web app will be looking for index.html in dist level, which will not exist, which cause the build pipeline to fail.

brc-dd commented 1 year ago

You can emit a blank html file to dist or have some project with base / too. Because anyway, those three projects won't be accessible from https://companydomain/ or https://companydomain/web/

kai-you2 commented 1 year ago

I see, is there a way for all three projects to be configuring at three different static web app then using the same domain to point to those web apps ? Seems these three projects are located at three different repo, so it seems impossible to do it in your structures.

brc-dd commented 1 year ago

I don't think that will be easy. Route rewrites could've been useful, but IG Azure needs them relative to your app root, which will be different for all three projects. If you put something like Cloudflare in front of Azure, then it might be possible to configure rewrites there and then use. Things like Azure NGINXaaS or Front Door might also work, but I haven't used them.

I'd recommend asking a question on StackOverflow (Azure Collective) stating that you've three different apps, you want to serve them under the same domain but different sub directories.

kai-you2 commented 1 year ago

Thanks for your answer, acutally I found a different approach using azure blob storage using static web app which you can just upload different dist to different sub folder, I am not sure if that's a great way for deploying vitepress , but for now it seems working, my best choice still would be azure static web app, since it comes with more advantage. but thanks again for helping!

brc-dd commented 1 year ago

Azure blob might have slightly degraded performance, because they are not exactly meant for serving sites. IIRC blob was more like s3 than cloudfront. Azure CDN endpoints might give significantly better performance here.

Anyway, there are a bunch of similar threads of StackOverflow, where people have recommended using Azure Application Gateway and Virtual Directories using which you can have multiple apps under the same domain.

Some threads for reference: