使用Nginx部署

Question

我开发了一个Microsoft外接程序，然后构建它，得到了以下结果。

> office-addin-taskpane-js@0.0.1 build
> webpack --mode production

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
assets by status 97.3 KiB [cached] 4 assets
assets by status 178 KiB [compared for emit]
  assets by path assets/*.png 31.5 KiB 7 assets
  assets by path *.js 133 KiB
    asset polyfill.js 129 KiB [compared for emit] [minimized] (name: polyfill) 1 related asset
    asset taskpane.js 2.97 KiB [compared for emit] [minimized] (name: taskpane) 1 related asset
    asset commands.js 597 bytes [compared for emit] [minimized] (name: commands) 1 related asset
  assets by path *.xml 12.3 KiB
    asset manifest.prod.xml 4.12 KiB [compared for emit] [from: manifest.xml] [copied]
    asset manifest_excel.prod.xml 4.12 KiB [compared for emit] [from: manifest_excel.xml] [copied]
    asset manifest_word.prod.xml 4.12 KiB [compared for emit] [from: manifest_word.xml] [copied]
  assets by path *.html 1.49 KiB
    asset taskpane.html 1.18 KiB [compared for emit]
    asset commands.html 313 bytes [compared for emit]
runtime modules 442 bytes 2 modules
modules by path ./node_modules/core-js/modules/*.js 222 KiB 219 modules
modules by path ./node_modules/core-js/internals/*.js 147 KiB 160 modules
modules by path ./src/ 7.83 KiB
  ./src/taskpane/taskpane.js 6.77 KiB [built] [code generated]
  ./src/commands/commands.js 1.06 KiB [built] [code generated]
./node_modules/core-js/stable/index.js 102 bytes [built] [code generated]
./node_modules/regenerator-runtime/runtime.js 24 KiB [built] [code generated]
./node_modules/core-js/es/index.js 8.89 KiB [built] [code generated]
./node_modules/core-js/web/index.js 398 bytes [built] [code generated]
webpack 5.53.0 compiled successfully in 4035 ms

现在我想使用Nginx部署它。我正在使用以下公式，但无法这样做。

server {
    listen 80;
    server_name exceladdin.test.com;
    root /home/rhythm/excel_addin;
    location / {
        try_files $uri /src/ /node_modules/core-js/modules/*.js /node_modules/core-js/internals/*.js /node_modules/core-js/stable/index.js /node_modules/core-js/regenerator-runtime/runtime.js /node_modules/core-js/es/index.js /node_modules/core-js/web/index.js /src/taskpan/taskpan.* /src/commands/commands.* /assets/*.;
        proxy_http_version 1.1;
        proxy_cache_bypass $http_upgrade;
    }
}

请提供一个解决方案，说明如何使用Nginx部署此节点js Microsoft外接程序。谢谢。

Answer 1

在我构建项目时，创建了dist目录。然后我就用Nginx映射那些东西。

server {
    listen 80;
    server_name exceladdin.test.com;
    root /home/rhythm/excel_addin/dist;

    location / {
        try_files $uri $uri/ =404;
        proxy_http_version 1.1;
        proxy_cache_bypass $http_upgrade;
        autoindex on;
        autoindex_exact_size off;
    }
}

构建项目后，需要在taskpan.html文件中正确映射js/CSS文件，因为在dist目录中，taskpan.html没有正确地重命名。您可能需要更改taskpan.html文件中的js/CSS文件名。您还可能需要一个SSL证书才能从您的Microsoft应用程序访问此证书。您还可能需要编辑清单文件。