Question

我是AWS的新手，并且正在使用node.js和react.js开发一个Web应用程序。我的应用程序可以在笔记本电脑上正常工作，但是我想将其上传到AWS EC2。

当我在笔记本电脑中模拟生产环境时，我有一个/ dist文件夹，其中包含所有前端代码，服务器代码位于/ src / server文件夹中。

我已将我的应用程序上传到EC2，但现在我对后续步骤有些迷茫。

首先，我想是否有任何方法可以下载未安装的模块其次，我想知道在这种环境中是否必须使用babel，因为在我进行开发的所有教程中，这些模块始终像dev devpencies一样安装。那么，现在是否必须将所有babel模块移至依赖项？现在，我执行这两个步骤的脚本是：

npm -i --production && cross-env NODE_ENV=production babel-node src/server/server.js

如果我将babel-node更改为node，则由于我未使用babel，“ import”命令会出现错误。

我的脚本是：

是否可以像针对前端代码但针对服务器代码那样进行构建？我该怎么办？

第四，将监听api调用的服务器将是节点服务器，这将在我正确完成aws-start脚本后得到。但是...服务器前端页面的最佳选择是什么？

对不起，我有太多问题，因为这是我在AWS中的第一个应用程序。

编辑我：

在构建代码时，遵循@Corrie MacDonald的明智建议，我得到了以下文件和文件夹：

接下来，我修改我的 aws-start 脚本：

npm i --production && cross-env NODE_ENV=production node dist/assets/js/bundle.js

但是，我遇到了这个错误：

我在做什么错了？

编辑II：

我的webpack.config.babel.js文件是：

import path from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";
import MiniCssExtractPlugin from "mini-css-extract-plugin";

const devMode = process.env.NODE_ENV !== "production";

console.log("devMode: " + devMode);


module.exports = {
    entry: "./src/client/index.js", //set entry file

    // Resolve to output directory and set file
    output: {
        path: path.resolve("dist/assets"),
        filename: "js/bundle.js",
        publicPath: "/assets"   //It's mandatory to define this publicPath to get access to the website when we reload pages
                                //or we access to them directly with url's which have directories of second level like 
                                //http://localhost:4000/directory-level-1/directory-level-2
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/client/index.html",    //where is our template
            filename: "../index.html",              //where we are going to put our index.html inside the output directory
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true
            }            
        }),
        new MiniCssExtractPlugin({
            filename: "css/bundle.css",
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true
            }             
        })
    ],
    //It help us to detect errors. 
    devtool: "source-map", 
    // Set dev-server configuration
    devServer: {
        inline: true,
        contentBase: './dist', 
        port: 3000,
        historyApiFallback: true
    },

    // Add babel-loader to transpile js and jsx files
    module: { 
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use:[
                    { 
                        loader: "babel-loader",
                        query: {
                            presets: [
                                "@babel/preset-react"
                            ]
                        }
                    }
                ]
            },
            {
                use: [
                    devMode ? "style-loader" : MiniCssExtractPlugin.loader, 
                    "css-loader"],
                test: /\.css$/
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: "saas-loader", 
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: "url-loader",
                options: {
                    limit: 10000,
                    publicPath: "/assets/images/",
                    outputPath: "./images/"
                }
            },
            {
                test: /\.(eot|ttf|woff|woff2)$/,
                loader: "url-loader",
                options: {
                    limit: 10000,
                    publicPath: "/assets/fonts/",   //It's mandatory to get access to the fonts when we reload pages or access directly
                    outputPath: "./fonts/"
                }
            }
        ]
    }

}

编辑III：

这是我的开发环境的文件夹：

在构建时如何查看，我使用前端代码创建了/ dist文件夹，但是我的服务器代码仍位于/ src / server文件夹中。如何为服务器代码创建/ dist文件夹？有可能吗？

Answer 1

在没有详细介绍自动化构建过程的情况下，这些步骤通常如下：

构建代码 -在这里，您的源代码已构建并转换为可分发格式，通常会放入dist/文件夹中。
上传您的可分发代码。 -在这里，您已构建的所有文件都应（手动或自动）上传到您的EC2实例。
运行启动脚本 -在这里，应该运行任何项目启动代码才能真正启动服务器。

您在生产中不需要Babel，因为那时您的项目应该已经建立了。但是，如果您是在EC2实例上构建的，则不仅需要上传dist，还需要它。

为了将EC2变成可路由的可访问Web服务器，您将需要在AWS上配置一些安全性和路由策略。您将需要确保实例具有可路由的IP（或者您可以使用AWS提供的自动生成的DNS）。其次，您需要确保您的安全策略允许使用端口80（至少，以及与服务器进行交互所需的任何其他端口-HTTPS，SSH或其他）。

一旦所有这些都准备就绪，就应该很好。

编辑

如果要提供静态HTML页面，则必须确保已将EC2容器设置为使用Apache之类的Web服务器。但是，我建议您仅从服务器运行节点服务器，并将静态Webpack捆绑包作为静态网站托管在S3上。

编辑2

这里是为节点设置EC2实例的介绍。 -https://medium.com/@nishankjaintdk/setting-up-a-node-js-app-on-a-linux-ami-on-an-aws-ec2-instance-with-nginx-59cbc1bcc68c
以下是使用S3建立静态网站的介绍。 -https://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html

AWS：将node.js应用程序传递到EC2的步骤

1 个答案: