Docker build config

[myl7]

Since there are many hot discussions about selfhosting the project (disscussion #595 #633 #518), the PR adds some simple Docker build config for the project, to help users serve the project with Docker by themselves easily.

To serve the project, build the Docker image and run it like:

docker build -t onedrive-vercel-index .
docker run -d --restart=unless-stopped --name=<...> -p <...>:3000 -e REDIS_URL=<...> onedrive-vercel-index

One problem is that since the 2 config files are bundled, when the config files change the Docker image needs to be rebuilt.

There is a similar discussion #112 having talked about selfhosting deployment, but times goes by and many components changed. I would suggest including the selfhosting deployment config into the repo for better maintanance.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
onedrive-vercel-index	✅ Ready (Inspect)	Visit Preview	May 10, 2022 at 3:35AM (UTC)

[aidenlx]

你可以看下之前和docker相关的PR，作者有说他不接受合并到主分支

https://github.com/spencerwooo/onedrive-vercel-index/pulls?q=is%3Apr+docker

[myl7]

私以为 PR 除了以合入主线为末路以外，也可以提供一套解决方案，或者更具体地说，带代码的 show & tell

[aidenlx]

他建议放在讨论区或者gist上，具体等作者回复吧，估计不大会合并，我之前也折腾过😂

[myl7]

放 discussion 或者 gists 就没 git log 了，会丢失很多信息的
总的来说还是以 author 的意见为准，但至少从 #471 的待遇来看，大体上 author 应该是不介意 feature PR 留为 open 的

[evanferrao]

One problem is that since the 2 config files are bundled, when the config files change the Docker image needs to be rebuilt.

This can be partially* solved by allowing every config option to be set by environment variable.
For example,

config/api.config.js

/**
 * This file contains the configuration for the API endpoints and tokens we use.
 *
 * - If you are a OneDrive International user, you would not have to change anything here.
 * - If you are not the admin of your OneDrive for Business account, you may need to define your own clientId/clientSecret,
 *   check documentation for more details.
 * - If you are using a E5 Subscription OneDrive for Business account, the direct links of your files are not the same here.
 *   In which case you would need to change directLinkRegex.
 */
module.exports = {
  // The clientId and clientSecret are used to authenticate the user with Microsoft Graph API using OAuth. You would
  // not need to change anything here if you can authenticate with your personal Microsoft account with OneDrive International.
  clientId: process.env.API_CLIENT_ID || 'd87bcc39-1750-4ca0-ad54-f8d0efbb2735',
  obfuscatedClientSecret: process.env.API_OBFUSCATED_CLIENT_SECRET || 'U2FsdGVkX1830zo3/pFDqaBCVBb37iLw3WnBDWGF9GIB2f4apzv0roemp8Y+iIxI3Ih5ecyukqELQEGzZlYiWg==',

  // The redirectUri is the URL that the user will be redirected to after they have authenticated with Microsoft Graph API.
  // Likewise, you would not need to change redirectUri if you are using your personal Microsoft account with OneDrive International.
  redirectUri: process.env.API_REDIRECT_URI || 'http://localhost',

  // These are the URLs of the OneDrive API endpoints. You would not need to change anything here if you are using OneDrive International
  // or E5 Subscription OneDrive for Business. You may need to change these if you are using OneDrive 世纪互联.
  authApi: process.env.API_AUTH_API || 'https://login.microsoftonline.com/common/oauth2/v2.0/token',
  driveApi: process.env.API_DRIVE_API || 'https://graph.microsoft.com/v1.0/me/drive',

  // The scope we require are listed here, in most cases you would not need to change this as well.
  scope: process.env.API_SCOPE || 'user.read files.read.all offline_access',

  // Cache-Control header, check Vercel documentation for more details. The default settings imply:
  // - max-age=0: no cache for your browser
  // - s-maxage=0: cache is fresh for 60 seconds on the edge, after which it becomes stale
  // - stale-while-revalidate: allow serving stale content while revalidating on the edge
  // https://vercel.com/docs/concepts/edge-network/caching
  cacheControlHeader: process.env.API_CACHE_CONTROL_HEADER || 'max-age=0, s-maxage=60, stale-while-revalidate',
}

&

config/site.config.js

/**
 * This file contains the configuration used for customising the website, such as the folder to share,
 * the title, used Google fonts, site icons, contact info, etc.
 */
module.exports = {
  // This is what we use to identify who you are when you are initialising the website for the first time.
  // Make sure this is exactly the same as the email address you use to sign into your Microsoft account.
  // You can also put this in your Vercel's environment variable 'NEXT_PUBLIC_USER_PRINCIPLE_NAME' if you worry about
  // your email being exposed in public.
  userPrincipalName: process.env.NEXT_PUBLIC_USER_PRINCIPLE_NAME || '[email protected]',

  // [OPTIONAL] This is the website icon to the left of the title inside the navigation bar. It should be placed under the
  // /public directory of your GitHub project (not your OneDrive folder!), and referenced here by its relative path to /public.
  icon: process.env.WEBSITE_ICON || '/icons/128.png',

  // Prefix for KV Storage
  kvPrefix: process.env.KV_PREFIX || '',

  // The name of your website. Present alongside your icon.
  title: process.env.WEBSITE_TITLE || "Spencer's OneDrive",

  // The folder that you are to share publicly with onedrive-vercel-index. Use '/' if you want to share your root folder.
  baseDirectory: process.env.WEBSITE_BASE_DIRECTORY || '/Public',

  // [OPTIONAL] This represents the maximum number of items that one directory lists, pagination supported.
  // Do note that this is limited up to 200 items by the upstream OneDrive API.
  maxItems: process.env.WEBSITE_MAX_ITEMS || 100,

  // [OPTIONAL] We use Google Fonts natively for font customisations.
  // You can check and generate the required links and names at https://fonts.google.com.
  // googleFontSans - the sans serif font used in onedrive-vercel-index.
  googleFontSans: process.env.WEBSITE_GOOGLE_FONT_SANS || 'Inter',
  // googleFontMono - the monospace font used in onedrive-vercel-index.
  googleFontMono: process.env.WEBSITE_GOOGLE_FONT_MONO || 'Fira Mono',
  // googleFontLinks -  an array of links for referencing the google font assets.
  googleFontLinks: ['https://fonts.googleapis.com/css2?family=Fira+Mono&family=Inter:wght@400;500;700&display=swap'],

  // [OPTIONAL] The footer component of your website. You can write HTML here, but you need to escape double
  // quotes - changing " to \". You can write anything here, and if you like badges, generate some with https://shields.io
  footer:
  process.env.WEBSITE_FOOTER || 'Powered by <a href="https://github.com/spencerwooo/onedrive-vercel-index" target="_blank" rel="noopener noreferrer">onedrive-vercel-index</a>. Made with ❤ by SpencerWoo.',

  // [OPTIONAL] This is where you specify the folders that are password protected. It is an array of paths pointing to all
  // the directories in which you have .password set. Check the documentation for details.
  protectedRoutes: ['/🌞 Private folder/u-need-a-password', '/🥟 Some test files/Protected route'],

  // [OPTIONAL] Use "" here if you want to remove this email address from the nav bar.
  email: process.env.WEBSITE_EMAIL || 'mailto:[email protected]',

  // [OPTIONAL] This is an array of names and links for setting your social information and links.
  // In the latest update, all brand icons inside font awesome is supported and the icon to render is based on the name
  // you provide. See the documentation for details.
  links: [
    {
      name: 'GitHub',
      link: 'https://github.com/spencerwooo/onedrive-vercel-index',
    },
  ],

  // This is a day.js-style datetime format string to format datetimes in the app. Ref to
  // https://day.js.org/docs/en/display/format for detailed specification. The default value is ISO 8601 full datetime
  // without timezone and replacing T with space.
  datetimeFormat: process.env.WEBSITE_DATE_TIME_FORMAT || 'YYYY-MM-DD HH:mm:ss',
}

*This works fine for variables, however, it doesn't work for arrays. Arrays cannot be replaced by environment variables. This affects googleFontLinks, protectedRoutes & links in config/site.config.js, all of which are arrays.