office-js + Outlook-web-addins + Webpack + Производство

Я новичок в NodeJS, Webpack и особенно в Outlook Addin. Итак, я создал надстройку Outlook, используя базовые руководства из https://docs.microsoft.com/en-us/outlook/add-ins/addin-tutorial, все прошло хорошо.

Однако, когда дело дошло до развертывания в производственной среде, у меня было много проблем. Я разместил весь свой код в Production (экземпляр Ubuntu). Сначала протестировал простое приложение NodeJS "hello World" на Port: 8080, и оно отлично работало. Затем я попытался запустить свой Outlook Addin, точно так же, как я делал локально, он запускался на порту 3000, но мне нужно было запустить его на 8080 и в фоновом режиме. Итак, я использовал «PM2», а вот и «СТЕНА».

  • pm2 start src / index.js у меня не работает, поскольку внутренняя ссылка Office.onReady или любая другая ссылка на Office не работает, вызывает ошибку undefined Office.

Я пробовал сборку сценария запуска pm2 (после изменений в файлах package.json и webpack.prod.js)

  • Однако я все еще получаю ту же ошибку при попытке запустить pm2 start dist / app.bundle.js.

Итак, подскажите, на какой файл я должен ссылаться при использовании pm2 start {filename / path}?

Вот некоторые конфигурации, которые я использую, webpack.common.js

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        polyfill: 'babel-polyfill',
        app: './src/index.js',
        'function-file': './function-file/function-file.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.html$/,
                exclude: /node_modules/,
                use: 'html-loader'
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: 'file-loader'
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Production'
        }),
        new HtmlWebpackPlugin({
            template: './index.html',
            chunks: ['polyfill', 'app']
        }),
        new HtmlWebpackPlugin({
            template: './function-file/function-file.html',
            filename: 'function-file/function-file.html',
            chunks: ['function-file']
        }),
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

webpack.prod.js

 const merge = require('webpack-merge');
 const common = require('./webpack.common.js');

 module.exports = merge(common, {
   mode: 'production',
   devtool: 'source-map'
});

person Shahroon    schedule 14.02.2019    source источник
comment
Я тоже работаю над надстройкой Outlook, и должен сказать, что работать с Microsoft очень утомительно, слишком много документации, которая совсем не помогает. Я провел реверс-инжиниринг и обнаружил, что для добавления для использования SSO требуется экспресс-сервер node.js, который запускается, когда вы разрабатываете аддон локально (путем запуска npm start).   -  person arthurr    schedule 23.11.2020
comment
Но как только я развернул файлы из dist в корзину S3, которая действует как веб-сервер, проверка подлинности SSO для обслуживающих файлов перестала работать.   -  person arthurr    schedule 23.11.2020
comment
Я обнаружил в коде, что вызов sso.getGraphToken (bootstrapToken) будет делать запрос GET к / auth, но такой путь не обслуживается моим аддоном.   -  person arthurr    schedule 23.11.2020
comment
Дальнейшее расследование показало, что / auth на самом деле является экспресс-маршрутом node.js из / node_modules / office-addin-sso, и поскольку я не использую этот сервер, моя корзина S3 пытается разрешить / auth и вернуть страницу addon index.html. Есть идеи, как решить эту проблему? Был бы очень признателен, потому что похоже, я не могу рассчитывать на помощь от Microsoft   -  person arthurr    schedule 23.11.2020


Ответы (2)


Содержание надстройки

Файлы, которые создаются из вашего проекта при сборке, должны содержать хотя бы немного JavaScript, затем, возможно, HTML и немного CSS, в зависимости от того, какую надстройку вы создаете. Наиболее распространенным, вероятно, является создание надстройка с панелью задач, которая по сути представляет собой веб-страницу. В любом случае созданные файлы не являются веб-сервером Node.js.

Размещение вашей надстройки

Чтобы сделать вашу надстройку доступной в Outlook или Office, необходимо где-то разместить ваши файлы. Это можно сделать с любым веб-сервером - простым веб-сервером Python, Apache, HTTP-сервером Node.js или чем-то подобным. Это можно сделать либо на локальном хосте, либо на другом хостинге. В руководстве по надстройке показано, как запустить сервер разработки Webpack для размещения файлов на https://localhost:3000. пока вы пишете код (npm run start).

В вашем файле manifest.xml вы заметите, что вы указываете адрес, по которому размещены ваши файлы. В моей настройке разработки для надстройки с панелью задач я указал, что файлы размещаются на локальном хосте, например:

<FormSettings>
  <Form xsi:type="ItemRead">
    <DesktopSettings>
      <SourceLocation DefaultValue="https://localhost:3000/index.html"/>
      <RequestedHeight>250</RequestedHeight>
    </DesktopSettings>
  </Form>
</FormSettings>

Производство

Однако при запуске приложения в производственной среде в руководстве говорится, что вам следует сделать npm run build. Те файлы, которые создаются, нужно где-то размещать. Я разместил свою надстройку на Amazon S3, это еще один способ размещения файлов.

Чтобы смоделировать это на localhost, выполните следующие действия.

В той же папке, что и ваш проект (где находится папка dist /):

  1. Запустите npm install http-server -g
  2. Запустите http-server dist/

Инструменты

Чтобы уточнить, для чего используются инструменты:

  • Webpack - это то, что объединяет ваше приложение, от исходного кода до объединенной версии, которую можно запускать в контексте браузера. Сервер разработки Webpack может использоваться для размещения файлов на локальном хосте во время разработки.
  • HTTP-сервер Node.js также можно использовать для размещения файлов на вашем локальном хосте.
  • pm2 - это менеджер процессов для Node.js. Вы можете использовать его для размещения сервера Node.js в производстве.
person maxpaj    schedule 21.02.2019
comment
Спасибо за столь подробный ответ, однако один вопрос так и остался без ответа. Какой файл мне следует запустить с моим pm2 start [имя файла js]? после npm run build у меня есть каталог dist с файлами JS, а также index.html. - person Shahroon; 21.02.2019
comment
@Shahroon Добавил еще кое-что в разделе "Производство". Вам не нужен pm2, чтобы попробовать это, если вы действительно не хотите использовать pm2 для чего-то большего? - person maxpaj; 21.02.2019
comment
Я попробовал http-server dist /, он правильно запускает сервер, однако, когда я пытаюсь запустить браузер для Addin, кажется, что ссылки тега script на другие файлы не работают, GET / node_modules / office-ui-fabric-js / dist / css / fabric.min.css Ошибка (404): не найдено, а все остальные, включенные, не найдены. - person Shahroon; 22.02.2019
comment
И было бы полезно, если бы вы указали мне на учебник, которому следуете. - person Shahroon; 22.02.2019
comment
Если ваш встроенный код (в dist /) пытается получить доступ к файлам из node_modules, вероятно, вы неправильно используете импорт. Сборка файлов с помощью Webpack должна гарантировать, что использованный импорт из node_modules помещается в связанный .js или .css. Однако похоже, что office-ui-fabric-js плохо работает с Webpack или другими сборщиками. Вы можете попробовать ссылаться на файлы структуры, используя CDN, вместо того, чтобы использовать их из node_modules. Посетите github.com/OfficeDev/office-ui-fabric-js - person maxpaj; 22.02.2019
comment
Я не следую ни одному руководству. Я только что прочитал из документов . microsoft.com/en-us/outlook/add-ins/ - person maxpaj; 22.02.2019
comment
Позвольте нам продолжить это обсуждение в чате. - person Shahroon; 22.02.2019
comment
Я сделал это внутри докера, и он работает. Но внутри dist я не видел ничего, связанного с папкой ресурсов, как того требует manifest.xml. Любая помощь будет оценена - person Vikas Krishnan; 08.04.2021

Мы с @shahroon вместе работаем над этой проблемой. Мы все еще не можем заставить все работать и теперь заплатили за поддержку в Microsoft. К сожалению, и очень досадно, что Microsoft даже не признала нашу заявку в службу поддержки, а прошло уже 3 дня.

person Scott Williford    schedule 15.03.2019