首页 > 数据库 >记一次react+node+nginx+mysql+docker发布

记一次react+node+nginx+mysql+docker发布

时间：2024-11-15 16:19:02浏览次数：1  
标签：node log react nginx ssh 服务器 docker

简言

这是为了给老婆工作上算培训班课时，计算课销更方便点的CRM（纸质档转线上）

准备工作

  1. React项目
  2. Node项目（express，koa任意选择）
  3. 一台服务器（如果你是纯手工发布，服务器选择倒是无所谓，如果要结合docker的话，请选择国外服务器或者香港也行，阿里云就算了，我自己最开始用的阿里云，docker根本pull不下来，客服给我说懂的都懂）

服务器准备

当你准备好服务器后，请按照以下程序执行

  1. 使用root账户和登录密码登录服务器
    image.png

因为登录时输入密码是不可见的，因此建议使用Ctrl+C Ctrl+V将密码复制上去，然后回车登录

  1. 此时本地主机中 在.ssh目录下执行ssh-keygen -R 服务器IP，生成ssh秘钥，这一步是为了后续禁用密码登录，使用本机ssh登录更安全，成功后目录下会出现known_hosts.old
    image.png

  2. 执行ssh-copy-id root@服务器IP,将本地公钥复制到服务器的ssh权限目录下

image.png

  1. 禁用密码登录，在远程服务器上执行vim /etc/ssh/sshd_config，设置
    image.png
    然后保存

  2. 执行service sshd restart重启配置

  3. 然后关闭远程面板或者命令行工具，重新打开命令行工具，执行ssh root@服务器IP，此时可以发现不用输入密码便可以登录服务器

  4. 执行apt update，更新包索引的命令。它的作用是从配置的包仓库中获取最新的软件包信息，以便后续安装、升级和删除操作。

  5. 执行apt install docker.io以及apt install docker-compose，安装docker以及docker-compose用于启用docker以及编排后续的docker容器

到此为止服务器基本配置就已完成

项目准备

  1. 检查当前服务器上是否有git(使用命令git)，如果没有的话，请执行apt install git
  2. 将服务器上的ssh公钥复制到你的github或者gitlab的公钥设置处，服务器公钥存放目录~/.ssh/,然后执行命令ssh-keygen，选择后缀名为.pub的文件查看，我这里执行cat id_rsa.pub，然后把查看到的公钥串

image.png

复制到github或者gitlab的公钥串配置处，添加，然后就可以通过ssh的方式，将远程仓库的代码拉到服务器本地了
image.png

  1. 我这里在/opt目录下新建project目录,mkdir project

image.png

  1. 然后在project目录下(git clone)拉取我的前端React项目以及后端Node项目
    image.png

  2. 在本文档中，创建docker-compose.yml，这个文件用于编排docker容器，且只能叫这个名字，后缀可以改成.yaml

version: '3.8'
services:
  mysql:
    image: mysql:5.7
    container_name: mysql
      MYSQL_USER: user
      MYSQL_PASSWORD: 970314
    ports:
      - "3306:3306"
    volumes:
      - /srv/docker/mysql/data:/var/lib/mysql                   # 数据文件映射
      - /srv/docker/mysql/logs:/var/log/mysql                   # 日志文件映射
    networks:
      - niumu-network

  node:
    build: ./niumu-backend
    ports:
      - "3000:3000"
    depends_on:
      - mysql     # 依赖 MySQL
    container_name: node_backend_container
    environment:
      - NODE_ENV=production
    networks:
      - niumu-network

  nginx:
    build: ./niumu-art
    ports:
      - "8080:8080"
    depends_on:
      - node     # 先依赖 node
    container_name: react_nginx_container
    volumes:
      - /var/log/nginx/access.log:/var/log/nginx/access.log
      - /var/log/nginx/error.log:/var/log/nginx/error.log

volumes中如果从容器中映射到服务器的目录和文件没有的话就自己创建(:左边是映射到的服务器目录，右边为docker容器目录)

这里使用了build，因此容器构建的时候会根据build指向的目录下的Dockerfile文件中的命令执行

niumu-art下Dockerfile文件

# 使用官方的 Node 镜像作为构建阶段
FROM node:18 AS build

# 设置工作目录
WORKDIR /app

# 复制 package.json 和 package-lock.json
COPY package*.json ./

# 安装依赖
RUN npm install

# 复制整个项目到工作目录
COPY . .

# 构建 React 项目
RUN npm run build

# 使用 Nginx 作为生产阶段的基础镜像
FROM nginx:alpine

# 将 Nginx 配置文件复制到容器中
COPY nginx.conf /etc/nginx/nginx.conf

# 删除默认的 Nginx 静态文件，并替换为构建好的 React 静态文件
RUN rm -rf /usr/share/nginx/html/*

# 复制 React 构建的静态文件到 Nginx 目录
COPY --from=build /app/dist /usr/share/nginx/html

# 暴露端口 8080
EXPOSE 8080

# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]

niumu-art下nginx.conf文件

# Nginx 配置文件示例

# 定义用户和工作进程
worker_processes  auto;


# 定义事件
events {
    worker_connections  1024;
}



# 定义 http 设置
http {
    # 定义错误日志和访问日志
    error_log  /var/log/nginx/error.log;
    access_log  /var/log/nginx/access.log;

    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    # 定义日志格式
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    sendfile        on;
    keepalive_timeout  65;


    upstream backend {
        server 服务器IP地址:3000;
    }

    # 服务器配置
    server {
        listen       8080;  # 监听 80 端口
        server_name  服务器IP地址;  # 修改为你的域名

        location / {
            root   /usr/share/nginx/html;  # 静态文件目录
            try_files $uri /index.html;
        }

        location /api {
            proxy_pass http://backend;  # 反向代理到后端 API
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }

        # 错误页面
        # error_page  404 /404.html;
        # error_page  500 502 503 504 /50x.html;

        # location = /50x.html {
        #     root   /var/www/html;
        # }
    }
}

niumu-backend下Dockerfile文件

# 使用官方的 Node 镜像作为基础镜像
FROM node:18

# 设置工作目录
WORKDIR /app

# 复制 package.json 和 package-lock.json
COPY package*.json ./

# 安装 PM2
RUN npm install pm2 -g

# 安装依赖
RUN npm install

# 复制项目文件到工作目录
COPY . .

# 暴露端口 3000
EXPOSE 3000

# 启动应用
CMD ["sh", "-c", "pm2-runtime start ./ecosystem.config.js"]

ecosystem.config.js创建在node项目根目录下

module.exports = {
  apps: [
    {
      name: "app",
      script: "./src/main.js", // 这里写node启动的文件
    },
  ],
};

构建并运行docker容器

回到/opt/project目录，执行docker-compose up -d，此时开始拉取Dockerfile和docker-compose.yml中指定的服务镜像，并根据镜像构建容器，构建完容器后，建立工作区，并执行Dockerfile中前端的打包构建或后端服务启动的命令
image.png

image.png

当前端nginx服务启动完成，node后端服务启动完成，mysql服务启动完成，那么就可以进行线上访问了

结果

nginx监听的端口为8080，因此就访问http://你的服务器IP:8080
image.png

注意

请求接口操作数据库前，一定要检查自己有没有建表，查看线上数据库可以使用一些数据库图形化软件(我用的DBeaver),连接线上数据库
image.png

感谢

  1. B站教nodejs搭后台的的某UP

  2. 当前这家公司的运维大哥提供的运维支持

  3. 上家公司给我抽象数据表的大哥

  4. 感谢老婆对服务器购买的资金支持

标签：node,log,react,nginx,ssh,服务器,docker
From： https://www.cnblogs.com/laowangcoding/p/18548191

相关文章

  • 从零到一构建并打包 React + TypeScript + Less组件库教程（四、Icon 图标组件库自动生
    了解流行组件库的Icon组件本系列目录如下：项目初始化搭建+代码规范集成组件库多产物编译及文档编写turborepo集成Icon图标组件库自动生成svg组件点击查看此次commit本篇文章技术来源于semidesign，参考了semidesign的icon组件库设计观察我们经常使用的组件......
  • React系列一：创建React项目
    文章目录NPM安装React检查是否安装Node.js和npm检查拉取仓库是否使用国内并设置国内使用create-react-app快速构建React开发环境项目结构src下的index.js和index.csssrc下的App.js和App.cssApp.js挂载新组件NPM安装React检查是否安装Node.js和npmnode-vnpm-v......
  • React Router 的实现原理
     本文分两部分，一说前端路由的基本原理，二说ReactRouter的实现原理前端路由的基本原理​不说屁话，从时间线上讲，Web应用原本是后端渲染，后来随着技术的发展，有了单页面应用，慢慢从后端渲染发展成前端渲染在博客前端路由hash、history的实现 一问中我已经介绍过这两种模式h......
  • 第14章 Nginx WEB服务器企业实战
    万维网(WORLDWIDEWEB，WWW)服务器，也称之为WEB服务器，主要功能是提供网上信息浏览服务。目前主流的WEB服务器软件包括：Apache、Nginx、Lighttpd、IIS、Resin、Tomcat、WebLogic、Jetty。本章介绍Nginx高性能WEB服务器、Nginx工作原理、安装配置及升级、Nginx配置文件深入剖析......
  • React setState是异步吗？
     React官网对于setState的说明：将setState()认为是一次请求而不是一次立即执行更新组件的命令。为了更为可观的性能，React可能会推迟它，稍后会一次性更新这些组件。React不会保证在setState之后，能够立刻拿到改变的结果。以上说明执行setState时，有可能是异步（大部分情况下）更新......
  • node.js毕设网上投稿管理系统（程序+论文）
    本系统（程序+源码+数据库+调试部署+开发环境）带文档lw万字以上，文末可获取源码系统程序文件列表开题报告内容一、选题背景关于毕设网上投稿管理系统的研究，现有研究主要以传统的投稿管理模式为主，专门针对毕设网上投稿管理这一特定情境的研究较少。目前的投稿管理多集中于一般......
  • node.js毕设师生科研信息管理系统（程序+论文）
    本系统（程序+源码+数据库+调试部署+开发环境）带文档lw万字以上，文末可获取源码系统程序文件列表开题报告内容一、选题背景关于毕设师生科研信息管理系统的研究，现有研究主要以教师科研信息管理、学生科研信息管理等独立模块为主，专门针对毕设师生科研信息一体化管理的研究较少......
  • node.js毕设智慧物流指挥大厅（程序+论文）
    本系统（程序+源码+数据库+调试部署+开发环境）带文档lw万字以上，文末可获取源码系统程序文件列表开题报告内容选题背景随着电子商务和物流行业的快速发展，智慧物流成为现代物流业的重要发展方向。关于智慧物流的研究，现有研究主要集中在物流网络优化、智能仓储管理、物流信息系......
  • node.js毕设烟草销售管理系统（程序+论文）
    本系统（程序+源码+数据库+调试部署+开发环境）带文档lw万字以上，文末可获取源码系统程序文件列表开题报告内容一、选题背景关于烟草销售管理系统的研究，现有研究主要集中在烟草行业的整体运营、市场策略等方面，专门针对烟草销售管理系统这一具体工具的研究较少。在国外，烟草销售......
  • node.js毕设智慧校园学生档案管理系统（程序+论文）
    本系统（程序+源码+数据库+调试部署+开发环境）带文档lw万字以上，文末可获取源码系统程序文件列表开题报告内容一、选题背景关于智慧校园学生档案管理系统的研究，现有研究主要集中在教育信息化的整体推进、校园管理系统的集成等方面，专门针对学生档案管理这一具体应用的研究较少......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99