阅读 457

Web前端-从零搭建服务器及部署项目

从零搭建服务器

首先准备一个阿里云/腾讯云服务器,系统选用的是Linux系统

万物核心--node

安装node 先安装nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
复制代码

或者

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
复制代码

安装后查看nvm版本是否安装成功(可能需要重启终端)

nvm --version
复制代码

然后使用nvm安装node

nvm install node
复制代码

安装node过程可能会出现gcc版本过低报错,导致node安装不上,升级gcc即可

升级/安装gcc

gcc下载地址ftp.gnu.org/gnu/gcc/,可以…

cd /usr/local/ //进入根目录底下的local
复制代码

选择gcc版本 下载解压

wget http://ftp.gnu.org/gnu/gcc/gcc-7.1.0/gcc-7.1.0.tar.gz

tar -zxvf gcc-7.1.0.tar.gz 
复制代码

进入gcc目录

cd gcc-7.1.0/
./contrib/download_prerequisites
复制代码

gcc源码编译 先安装依赖包

yum install m4 -y

yum install gmp-devel.x86_64 -y

yum install mpfr-devel.x86_64 -y

yum install gcc-c++.x86_64 -y
复制代码

回到local目录下 创建一个build文件夹

mkdir gcc-build-7.1.0
cd gcc-build-7.1.0
复制代码

依次执行命令

/usr/local/gcc-7.1.0/configure --enable-checking=release --enable-languages=c,c++ --disable-multilib

make //这个会很漫长

make install
复制代码

然后查看版本确认安装成功

gcc -v

7.1.0
复制代码

然后就可以安装node了

nvm install 14.17.3
复制代码

将项目部署到服务器上

服务器安装git

yum install -y git

or

yum install git-all
复制代码

为服务器配置ssh密钥,然后将生成的.ssh/id_rsa.pub里的内容复制到码云/GitHub/GitLab上添加ssh

ssh-keygen -t rsa -C "xxxxx@xxxxx.com"  //三连回车
复制代码

克隆项目到服务器上

进入www文件夹
git clone ssh地址
复制代码

打包项目

cd vue-demo
npm i //安装依赖
npm run build //打包
复制代码

安装nginx及配置

yum -y install nginx
复制代码

进入etc下的nginx/confi.d目录 创建一个配置文件 项目名.conf

需要用pm2进行管理的

server {
  listen 80;
  server_name txclass-api.yutouweb.cn; //域名
  access_log /www/log/jsppapi/access.log;//日志
  error_log /www/log/jsppapi/error.log;

  location / {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-Nginx-Proxy true;
    proxy_pass http://127.0.0.1:3002;//反向代理端口
    proxy_redirect off;
 }
}
复制代码

直接打包好的,如vue react项目

server {
  listen 80;
  server_name xiaoqiu.yutouweb.cn;
  access_log /www/log/vue-demo/access.log;
  error_log /www/log/vue-demo/error.log;
  location / {
    root /www/vue-demo/dist;
    index index.html;
 }
}
复制代码

创建相关配置文件

//到根目录下创建www文件夹
cd /
mkdir www
//创建日志log文件夹
cd www
mkdir log 
//创建项目文件夹
cd log
mkdir vue-demo
//创建项目日志文件
cd vue-demo 
touch access.log error.log
复制代码

修改配置之后

nginx -t //校验配置是否正确
systemctl restart nginx 重启nginx
复制代码

阿里云配置域名及开放安全组端口

配置域名

购买域名后,到阿里云-DNS解析-添加记录
添加一条A记录,主机记录则为三级域名,与nginx配置文件中的server_name 一致,记录值则填写服务器实例的公网IP地址
如:A记录 xxx.xxx.cn 47.xxx.xxx.xxx 
复制代码

配置安全组

在云服务器ECS-网络与安全-安全组下,创建安全组
访问规则:
入方向/出方向:将80/443端口开放即可
然后将该安全组配置到对应的所需服务器上即可
复制代码
文章分类
前端
文章标签