Question

我已经用NextJS和React开发了我的应用程序。现在，我想让它在托管服务提供商处运行。但是，我有一些问题...

第一个问题：如何在端口443上运行我的应用程序？我的自定义server.js文件如下所示：

const express = require('express')
const next = require('next')
const bodyParser = require('body-parser')
const request = require('request')
const requestLanguage = require('express-request-language')
const dev = process.env.NODE_ENV !== 'production'
var app = next({ dev })

const handle = app.getRequestHandler()

app.prepare()
    .then(() => {

        const server = express()

        //parse application
        server.use(bodyParser.urlencoded({ extended: false }))

        //parse application/json
        server.use(bodyParser.json()) 

        server.use(requestLanguage({
            languages: ['en-US', 'de-DE']
          }))

          server.get('/', (req, res) => {
            switch (req.language) {
              case 'de-DE':
                return app.render(req, res, '/', req.query)
              default:
                return app.render(req, res, '/en', req.query)
            }
          })

        server.post('/', (req, res) => {
            addEmailToMailChimp(req.body.email, req.language, (error, response, body) => {
                // This is the callback function which is passed to `addEmailToMailChimp`
                try {
                    var respObj = {}; //Initial response object
                    if (response.statusCode === 200) {
                        if (req.language == 'de-DE') {
                            respObj = { success: `Abo mit ${req.body.email} abgeschlossen!`, message: response.body };
                        } else {
                            respObj = { success: `Subscribed using ${req.body.email}!`, message: response.body };
                        }
                    } else {
                        if (req.language == 'de-DE') {
                            respObj = { error: `Ein Fehler ist aufgetreten. Versuche es später erneut.`, message: response.body };
                        } else {
                            respObj = { error: `Error trying to subscribe ${req.body.email}. Please try again.`, message: response.body };
                        }
                    }
                    res.send(respObj);
                } catch (err) {
                    if (req.language == 'de-DE') {
                        var respErrorObj = { error: 'Während der Anfrage ist ein Fehler aufgetreten', message: err.message };
                    } else {
                        var respErrorObj = { error: 'There was an error with your request', message: err.message };
                    }
                    res.send(respErrorObj);
                }
            });
        })


        server.get('*', (req, res) => {
            return handle(req, res)
        })



        server.listen(3000, (err) => {
            if (err) throw err
            console.log('> Ready on http://localhost:3000')
        })
    })
    .catch((ex) => {
        console.error(ex.stack)
        process.exit(1)
    })

function addEmailToMailChimp(email, lang, callback) {
    const ENListID = "cac1d74f93"
    const DEListID = "362b0f2e7b"
    var ListID = ""

    if (lang == 'de-DE') {
        ListID = DEListID
    } else {
        ListID = ENListID
    }
    var options = {
        method: 'POST',
        url: `https://us19.api.mailchimp.com/3.0/lists/${ListID}/members`,
        headers:
        {
            'Postman-Token': 'ca5b4512-5977-4165-b543-e7df87129578',
            'Cache-Control': 'no-cache',
            Authorization: 'Basic YW55c3RyaW5nOjQ1MDM5NzA5YWJjOGY2Zjc1YTRmNTljOTJkNjU4NTE0LXVzMTk=',
            'Content-Type': 'application/json'
        },
        body: { email_address: email, status: 'pending' },
        json: true
    };
    request(options, callback);
}

要使用端口443，我到底需要在此处进行哪些更改？

第二个问题：在使用命令npm run build进行构建的过程中，我遇到了一些本地未发生的错误，但是：

[11:20:24] Compiling client
[11:20:24] Compiling server
[11:20:26] Compiled server in 2s
[11:20:29] Compiled client in 5s
> Failed to build
{ Error: (client) ./css/index.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/webp-loader/index.js):
Error: spawn /home/tmaulmxw/formally-homepage/node_modules/cwebp-bin/vendor/cwebp ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:190:19)
    at onErrorNT (internal/child_process.js:362:16)
    at _combinedTickCallback (internal/process/next_tick.js:139:11)
    at process._tickCallback (internal/process/next_tick.js:181:9)
    at runLoaders (/home/tmaulmxw/formally-homepage/node_modules/webpack/lib/NormalModule.js:286:20)
    at /home/tmaulmxw/formally-homepage/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /home/tmaulmxw/formally-homepage/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/home/tmaulmxw/formally-homepage/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /home/tmaulmxw/formally-homepage/node_modules/webp-loader/index.js:32:9
    at <anonymous>

错误到底在哪里？但是，当我运行命令npm run dev时，不会发生此错误。我的package.json文件如下所示：

{
  "name": "formally_homepage",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "axios": "^0.18.0",
    "body-parser": "^1.18.3",
    "evergreen-ui": "^4.0.0-41",
    "express": "^4.16.3",
    "express-request-language": "^1.1.15",
    "img-loader": "^3.0.0",
    "js-cookie": "^2.2.0",
    "next": "^7.0.0",
    "next-compose-plugins": "^2.1.1",
    "next-ga": "^2.3.1",
    "next-images": "^1.0.0",
    "next-optimized-images": "^1.4.1",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "request": "^2.88.0",
    "restify": "^7.2.1",
    "ui-box": "^1.4.0"
  }
}

在托管服务器上，我有一台Linux服务器，该服务器上已经安装了节点，NPM和package.json文件中的所有依赖项。

我是这个领域的初学者，因此实际上取决于您的帮助。请给我看一些具体的例子，我需要做些什么。我对此感到非常高兴。谢谢

NextJS和React：如何为生产环境做好准备

0 个答案: