一文解读单机服务器部署的最佳姿势：Nginx/Node/Nuxt/React/NG全攻略

2023-12-21 14:10:46

在单机服务器上部署Nginx/Node/Nuxt/React/NG是一个常见的任务。通过将这些技术栈组合在一起，开发人员可以轻松构建和部署现代Web应用程序。本文将详细介绍如何进行该部署，包括常规优化和自启脚本的配置。

前提条件

在开始部署之前，需要确保已经满足以下前提条件：

单机服务器具有足够的硬件资源，包括CPU、内存和存储空间。
操作系统为Linux发行版，例如Ubuntu或CentOS。
已安装Nginx、Node.js、Nuxt.js、React.js和Angular。
应用程序代码已准备就绪，并已存储在服务器上。

部署步骤

安装Nginx

sudo apt-get update
sudo apt-get install nginx

配置Nginx

在/etc/nginx/sites-available/default文件中，添加以下内容：

server {
  listen 80;
  server_name example.com;
  root /var/www/html;
  index index.html index.htm;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

安装Node.js

curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs

安装Nuxt.js

npm install nuxt -g

安装React.js

npm install create-react-app -g

安装Angular

npm install -g @angular/cli

创建应用程序

mkdir my-app
cd my-app

初始化Nuxt.js项目

npx nuxt init my-nuxt-app

初始化React.js项目

create-react-app my-react-app

初始化Angular项目

ng new my-angular-app

启动应用程序

cd my-nuxt-app
npm run dev

cd my-react-app
npm start

cd my-angular-app
ng serve

配置自启脚本

sudo nano /etc/systemd/system/my-app.service

在文件中添加以下内容：

[Unit]
Description=My Application
After=network.target

[Service]
Type=simple
ExecStart=/usr/bin/node /var/www/html/my-app/server.js
Restart=on-failure

[Install]
WantedBy=multi-user.target