开源项目前端开发环境部署指南

376 阅读1分钟

一、环境和工具前置条件

1、nginx
最好是最新的版本
2、IntelliJ IDEA

3、Visual Studio Code

4、node环境

版本必须是:14.21.3 及以下,不能是16或以上的版本,不然npm install不成功
如果其他项目依赖高版本,可以使用nvm管理

nvm list
nvm use v16.20.2
nvm use v14.21.3

二、相关配置

在Nginx的配置文件conf中,配置如下:

  server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
        proxy_redirect                      off;
        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;
        proxy_read_timeout          1m;
        proxy_connect_timeout       1m;
        proxy_pass                          http://127.0.0.1:9528;
        }

        location ^~ /api/ {
            proxy_pass http://127.0.0.1:8001/;

        }

配置的意思是:url带api路径的,转到服务端请求接口,否则请求前端html和资源

三、安装依赖

1、下载源码,并安装依赖

git clone git@gitee.com:redskt/redcloudcollege-index.git
cd redcloudcollege-index
npm install

注意:建议切成国内源,作者使用的是华为源

https://repo.huaweicloud.com/repository/npm  // 华为源
https://registry.npmmirror.com                // 淘宝源

npm config get registry // 获取当前源地址的命令
npm config set registry https://repo.huaweicloud.com/repository/npm   // 设置源地址的命令

2、运行项目

npm run dev  // 调试模式
npm run build // 然后在运行下面命令
pm2 start npm --name "index" -- run start  // 服务端部署命令

四、运行服务端项目

1、安装服务端开发环境

服务端安装教程
www.jianshu.com/p/9531db583…

2、导入数据库结构表

创建mysql数据库,然后导入项目数据库中的所有表:sql文件地址:对应服务端:025ab97017a34ade65b8674252172183f93242e5 这次提交 static.redskt.com/file/redclo…

3、根据服务端安装教程配置好数据库和加密参数

1716302531526.png

4、启动服务端项目

5、启动nginx

6、启动前端项目

npm run dev 然后浏览器访问http://localhost即可

image.png