- 需要的工具
- Linux服务器(或者其他系统),aws可以构建免费的
- 登录远程服务器
ssh -i 私钥文件地址 用户名@aws实例的公有 IPv4 DNS或者在网页操作
- 配置环境
- node.js(前端工程)
//下载node
wget http://nodejs.org/dist/v0.8.2/node-v0.8.2.tar.gz
//解压
tar -zxf node-v0.8.01.tar.gz
cd node-v0.6.18
./configure
make
//安装
sudo make instal
//检测安装
node -v //显示node版本号
npm -v //显示npm版本号
如果没出现，检查node包bin目录下面的node、npm脚本存在不，不存在，重新安装。存在的话将node和npm设置软连接
ln -s npm包路径/bin/node /usr/bin/
ln -s npm包路径/bin/npm /usr/bin/
- git(同步代码)
wget https://github.com/git/git/archive/v2.17.1.tar.gz
tar zxvf v2.17.1.tar.gz
cd git # or whatever directory the tar.gz file contains
./configure
make
make install
yum -y install git
- Nginx(代理配置)
1. #安装编译工具及库文件
yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel
2. #安装 PCRE PCRE 作用是让 Nginx 支持 Rewrite 功能。
**mkdir** -p /usr/local/bin/pcre
cd /usr/local/bin/pcre
# https://ftp.pcre.org/pub/pcre/
wget https://ftp.pcre.org/pub/pcre/pcre-8.44.tar.gz
# 解压pcre
tar zxvf pcre-8.44.tar.gz
#进入安装包目录
cd pcre-8.44
# 配置编译
./configure
make && make install
#查看pcre版本
pcre-config --version
3. #安装 Nginx
# 下载
wget http://nginx.org/download/nginx-1.20.0.tar.gz
# 解压
tar vxzf nginx-1.20.0.tar.gz
# 编译
cd nginx-1.20.0
./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-pcre=/usr/local/bin/pcre/pcre-8.44
make && make install
# 删除旧文件
rm -rf /usr/local/nginx1
#软链
ln -s /usr/local/nginx/sbin/nginx /usr/bin/nginx
- 创建前端项目 为了方便编辑，在本地创建，然后可同步到git仓库
- 技术选型
Next.js+tailwindcss
npx create-next-app my-project
cd my-project
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
// 配置 tailwind.config.js
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
//globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
// 运行前端项目
npm run dev
同步到远程代码仓库
- 服务器部署
- 登录服务器
- git拉去前端项目
- 使用nohup命令运行前端项目，使前端任务一直挂起
- cd 到项目目录
- nohup npm run start >my.log&exit 默认开启端口3000
- 访问服务器ip地址 xxxx:3000 正常会看到前端页面显示
- 正常是希望访问ip xxxxx直接看到页面显示，默认访问的端口是80，此时需要做的是访问端口80的时候转发到端口3000,就需要用nginx配置代理
- cd usr/local/nginx/conf
- vim nginx.conf
...省略...
server {
listen 80;
#这里服务名称 远程写域名,本地写localhost
#server_name abc.com www.abc.com;
server_name localhost;
#charset koi8-r;
# 配置跨域
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Headers' '*';
add_header 'Access-Control-Allow-Methods' '*';
#access_log logs/host.access.log main;
location / {
#node用的3000端口就这样写
proxy_pass http://127.0.0.1:3000;
root html;
index index.html index.htm;
}
- /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf(启动nginx)
此时直接访问ip会正常显示前端网页
