Cannot obfuscate chunk filenames without breaking dist directory structure

ffxsam commented 1 year ago

What version of `astro` are you using?

2.7.2

Are you using an SSR adapter? If so, which one?

Node, SST

What package manager are you using?

pnpm

What operating system are you using?

macOS 13.4

What browser are you using?

N/A

Describe the Bug

Out of the box, Vue components in Astro have their full names deployed to the server, which means that users can get a sense of an application's structure (not great, from a security standpoint). Ideally, one would prefer to obfuscate all names.

When following the instructions here, then running pnpm build, the dist directory structure breaks.

Good dist structure (no rollup config), but exposed component names:

dist
├── client
│   ├── _astro
│   │   ├── HelloThere.9fb0245b.js
│   │   ├── HelloThere.9fb0245b.js.map
│   │   ├── client.50f1868d.js
│   │   ├── client.50f1868d.js.map
│   │   ├── index.39048fa7.css
│   │   ├── runtime-core.esm-bundler.b1c45429.js
│   │   └── runtime-core.esm-bundler.b1c45429.js.map
│   ├── favicon.svg
│   └── robots.txt
└── server
    ├── _@astrojs-ssr-virtual-entry.mjs.map
    ├── _empty-middleware.mjs
    ├── _empty-middleware.mjs.map
    ├── chunks
    │   ├── astro.b2659a38.mjs
    │   ├── astro.b2659a38.mjs.map
    │   ├── index.5bf555df.2c2f8848.mjs.map
    │   ├── index@_@astro.d6e21aa5.mjs
    │   ├── index@_@astro.d6e21aa5.mjs.map
    │   └── pages
    │       ├── index.astro.8fd0d37d.mjs
    │       └── index.astro.8fd0d37d.mjs.map
    ├── entry.mjs
    ├── renderers.mjs
    └── renderers.mjs.map

Dist structure with rollup output options:

dist
├── client
│   ├── chunk.b1c45429.js
│   ├── chunk.b1c45429.js.map
│   ├── entry.5d32a7b1.js
│   ├── entry.5d32a7b1.js.map
│   ├── entry.a9de9c55.js
│   ├── entry.a9de9c55.js.map
│   ├── favicon.svg
│   └── robots.txt
└── server
    ├── _@astrojs-ssr-virtual-entry.mjs.map
    ├── _empty-middleware.mjs
    ├── _empty-middleware.mjs.map
    ├── asset.39048fa7.css
    ├── chunk.3a7cb9a7.js.map
    ├── chunk.53519c88.js
    ├── chunk.53519c88.js.map
    ├── chunk.b2659a38.js
    ├── chunk.b2659a38.js.map
    ├── chunk.b6aa1395.js
    ├── chunk.b6aa1395.js.map
    ├── entry.mjs
    ├── renderers.mjs
    └── renderers.mjs.map

This causes issues with certain SSR adapters, like SST, which create CloudFront cache behaviors so that requests for static assets get sent to AWS S3, rather than invoke the SSR Lambda function. Example:

When attempting to use the rollup output options, the _astro folder is gone, so SST tries to create a CloudFront cache behavior for every single file, which exceeds the default CloudFront distribution quota.

What's the expected result?

I would expect only the filenames to change, and the directory structure to be maintained.

Link to Minimal Reproducible Example

https://github.com/ffxsam/repro-astro-chunk-names

Participation

[ ] I am willing to submit a pull request for this issue.

ffxsam commented 1 year ago

Also, I did try this:

      rollupOptions: {
        output: {
          entryFileNames: "entries/entry.[hash].js",
          chunkFileNames: "chunks/chunk.[hash].js",
          assetFileNames: "assets/asset.[hash][extname]",
        },
      },

which deployed fine, since it results in fewer cache behaviors (entries/*, chunks/* and assets/*), but as above, the CSS asset is moved into dist/server instead of dist/client and so the web page fails to load properly.

dist
├── client
│   ├── chunks
│   │   ├── chunk.b1c45429.js
│   │   └── chunk.b1c45429.js.map
│   ├── entries
│   │   ├── entry.7ecccc8f.js
│   │   ├── entry.7ecccc8f.js.map
│   │   ├── entry.d9936ad3.js
│   │   └── entry.d9936ad3.js.map
│   ├── favicon.svg
│   └── robots.txt
└── server
    ├── _@astrojs-ssr-virtual-entry.mjs.map
    ├── _empty-middleware.mjs
    ├── _empty-middleware.mjs.map
    ├── assets
    │   └── asset.39048fa7.css
    ├── chunks
    │   ├── chunk.31127976.js
    │   ├── chunk.31127976.js.map
    │   ├── chunk.81d7256f.js
    │   ├── chunk.81d7256f.js.map
    │   ├── chunk.b17f60f4.js.map
    │   ├── chunk.b2659a38.js
    │   └── chunk.b2659a38.js.map
    ├── entry.mjs
    ├── renderers.mjs
    └── renderers.mjs.map

bluwy commented 1 year ago

We can't automatically handle this because once you manually configure entryFileNames, chunkFileNames, and assetFileNames, you have full control over how the files are generated. If we interfere it, it would cause some unexpected behaviour for some users.

Also to get the CSS properyl moved, you need to configure build.assets, which in your example shown, should be "assets".

Closing as wontfix.

withastro / astro