nginx+node+vue的惊人组合，带你领略前后端分离应用的魅力

2023-10-02 09:33:32

服务器配置

首先，确保你的Linux服务器已安装nginx，并可以通过以下命令验证其安装是否成功：

nginx -v

接下来，你需要创建一个新的nginx配置文件，以便配置nginx的反向代理功能。创建一个名为nginx.conf的新文件，并添加以下配置：

server {
    listen 80;
    server_name example.com;

    # 配置静态资源的路径
    root /path/to/static/resources;

    # 配置反向代理，将请求转发至Node.js应用程序
    location /api {
        proxy_pass http://localhost:3000;
    }
}

在以上配置中，我们将nginx的端口设置为80，服务器名称设置为example.com，并指定了静态资源的路径。同时，我们在location /api中配置了反向代理，将请求转发至Node.js应用程序，其中3000是Node.js应用程序监听的端口。

2. Node.js应用程序

现在，让我们创建一个简单的Node.js应用程序。创建一个名为server.js的新文件，并添加以下代码：

const express = require('express');

const app = express();

app.get('/api/hello', (req, res) => {
  res.send('Hello, world!');
});

app.listen(3000);

在这个Node.js应用程序中，我们导入了express模块并创建了一个新的express应用程序。接下来，我们定义了一个简单的GET路由，当客户端发送请求至/api/hello时，该路由将返回"Hello, world!"。最后，我们让应用程序监听3000端口。

3. Vue.js前端应用程序

现在，让我们创建一个简单的Vue.js前端应用程序。创建一个名为index.html的新文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello, world!'
      }
    })
  </script>
</body>
</html>