Ubuntu 部署前端项目

Ubuntu部署前端项目

搭环境

#nginx
apt-get install nginx

#nodejs
apt-get install nodejs

#mogonDB 有需要的话下载
apt-get install mongodb

#git
apt-get install git

#npm换源
npm config set registry https://registry.npm.taobao.org

#pm2 后台运行nodejs项目相关
npm i install pm2

相关指令

nginx 相关

#nginx 相关命令
start nginx #开启
nginx -s stop #关闭
nginx -s reload #重新加载配置文件

pm2 相关

#pm2 相关命令 
pm2 start app.js(入口文件) [--name appServer](指定运行项目别名appServer，自定义) [--watch](ubuntu版nodemon) #开启
pm2 status/list #查看正在运行的服务
pm2 delete id|name|pid #关闭服务
pm2 logs [appServer] #进入(某项目的)日志，退出为ctrl + c

ufw 相关

sudo ufw enable #开启防火墙
sudo ufw disable #关闭
sudo ufw reload #重启
sudo ufw allow 3000 #允许访问3000端口
sudo ufw deny 8888 #禁止访问8888端口
sudo ufw status #查看开放端口

shell 相关

netstat -an #查看端口占用情况
kill -9 pid #杀死进程

配置

后端（nodejs）

pm2 start index.js --name blog-server

pm2 logs blog-server #查看一下日志，看是否端口被占用， ctrl + c 退出

前端

修改nginx配置

cd /etc/nginx/conf.d #这个文件夹中的配置文件会自动加载到nginx.conf中，一般都是这个路径，有些是在/usr/local下
vi test-3300.conf #项目名 + 端口号，配置文件名，自定义

#写入下面这些后，保存退出后重新加载nginx，这是最基础的配置，有需要可以自己添加
server {
   listen            3001;
   server_name       localhost;
   location / {
       root          /var/www/html/yanlunyi/blog/dye-ink-book/build;
       try_files     $uri $uri/ @router; # 配置使用路由
       index         index.html index.htm;
       charset       utf-8;
   }

  location ^~/api/ { # 配置代理
       proxy_pass    http://localhost:3000; #最后不能加 '/'
  }

  location @router { # 前端路由设置
    rewrite ^.*$ /index.html last;
  }

}

重新加载nginx配置

nginx -s reload