火山引擎云服务器部署nuxt项目
本地开发与部署nuxt项目
node版本
shell运行 node -v 输出： v20.19.3，nuxt需要20+版本
模版创建nuxt项目
shell 运行 npm create nuxt@latest ,按照提示输入名称等，就好。
shell
> npx
> create-nuxt
.d$b.
i$$A$$L .d$b
.$$F` `$$L.$$A$$.
j$$' `4$$:` `$$.
j$$' .4$: `$$.
j$$` .$$: `4$L
:$$:____.d$$: _____.:$$:
`4$$$$$$$$P` .i$$$$$$$$P`
ℹ Welcome to Nuxt! nuxi 2:48:39 PM
❯ Where would you like to create your project?
./nuxt-app运行与构建
运行 npm run dev 后 浏览器访问localhost:3000,出现下面界面就成功了
执行 npm run build,因为我们是要打包构建后，上传构建包到云服务器
scss
//shell 输出
> build
> nuxt build
......中间省略
├─ .output/server/chunks/nitro/nitro.mjs (159 kB) (39.2 kB gzip)
├─ .output/server/chunks/nitro/nitro.mjs.map (2.98 kB) (755 B gzip)
├─ .output/server/chunks/routes/renderer.mjs (14.1 kB) (4.39 kB gzip)
├─ .output/server/chunks/routes/renderer.mjs.map (843 B) (285 B gzip)
├─ .output/server/chunks/virtual/_virtual_spa-template.mjs (94 B) (100 B gzip)
├─ .output/server/chunks/virtual/_virtual_spa-template.mjs.map (112 B) (111 B gzip)
├─ .output/server/index.mjs (353 B) (205 B gzip)
└─ .output/server/package.json (655 B) (291 B gzip)
Σ Total size: 1.8 MB (433 kB gzip)
✔ You can preview this build using node .output/server/index.mjs nitro 2:55:21 P执行node .output/server/index.mjs
csharp
//控制台输出
Listening on http://[::]:3000表明我build没有问题,也可修改端口和支持访问的主机
运行NITRO_PORT=3002 NITRO_HOST=0.0.0.0 node .output/server/index.mjs
NITRO_HOST=0.0.0.0 是一个重要的网络配置:
- 0.0.0.0 是一个特殊的 IP 地址，表示"监听所有可用的网络接口"：
- 如果设置 host: 'localhost' 或 host: '127.0.0.1'：
- 只能从本机访问
- 其他设备无法访问
- 如果设置 host: '0.0.0.0'：
- 可以从本机访问（通过 localhost 或 127.0.0.1）
- 可以从同一网络的其他设备访问（通过本机的 IP 地址）
- 如果配置了公网 IP，也可以从互联网访问
2.安全性考虑：
- 在开发环境使用 0.0.0.0 很常见，方便测试和调试
- 在生产环境要谨慎使用，最好配合防火墙规则来限制访问
pm2 部署
先安装pm2,运行npm install -g pm2 --registry https://registry.npmjs.org/
项目根目录新建ecosystem.config.cjs,内容如下
yaml
module.exports = {
apps: [
{
name: 'nuxt-app',
exec_mode: 'cluster',
instances: 1,
script: './.output/server/index.mjs',
env: {
NODE_ENV: 'production',
NITRO_PORT: 3000,
NITRO_HOST: '0.0.0.0',
}
}
]
} pm2部署项目，推荐reload命令，
运行pm2 reload ./ecosystem.config.cjs
pm2 list 查询当前程序是否运行成功
bash
├ id │ name │ mode │ ↺ │ status │ cpu │ memory │
├────┼────────────────────┼──────────┼──────┼───────────┼──────────┼──────────┤
│ 4 │ nuxt-app │ cluster │ 0 │ online │ 0% │ 60.2mb │浏览器访问localhost:3000,检验结果
云服务器购买与初始化
这里用的火山引擎，新用户29元一年(需要0点抢购)
买好以后进入云服务器主页，有各种服务器信息 这里需要关注 公网IP
shell运行 ssh root@服务器公网IP ,+云服务器购买时配置的密码，就可以访问了。
服务器需要初始化nuxt项目必要的运行环境
安装node v20.19.3 pm2 等 这里可以用宝塔Linux面板 可视化操作
Github Action 自动化部署
项目关联到github 根目录新建.github/workflows/deploy.yml
yaml
name: nuxr-app Nuxt.js Deploy
on:
push:
branches: [ main ]
jobs:
build:
# needs: test
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- run: npm ci
- run: npm run build
- name: Verify build output
run: |
pwd
ls -la .output
echo "Total files in .output: $(find .output -type f | wc -l)"
- name: Fix permissions
run: |
ls -la .output
chmod -R 755 .output
- name: Copy ecosystem.config.cjs
run: |
echo "Copying ecosystem.config.cjs to .output ..."
cp ecosystem.config.cjs .output/ecosystem.config.cjs
echo "Verifying copy:"
ls -la .output/ecosystem.config.cjs
echo "Contents of copied file:"
cat .output/ecosystem.config.cjs
#upload-artifact 上传.output文件夹有问题，这里我们用压缩包
- name: Create build archive
run: |
echo "=== Creating archive ==="
tar -czf build-output.tar.gz .output/
ls -la build-output.tar.gz
echo "Archive size: $(du -h build-output.tar.gz)"
- name: Upload build artifacts
uses: actions/upload-artifact@v4
with:
name: build-files
path: build-output.tar.gz
retention-days: 1
if-no-files-found: error
compression-level: 6
deploy:
needs: build
runs-on: ubuntu-latest
# github action 访问云服务器需要用户名、主机ip、sshprivatekey，参数配置在Github Action中，指定的environment，例如服务器的SSH_PRIVATE_KEY
environment: production
steps:
- uses: actions/checkout@v4
- name: Download build artifacts
uses: actions/download-artifact@v4
with:
name: build-files
path: ./
- name: Extract build files
run: |
tar -xzf build-output.tar.gz
ls -la .output/
- name: Deploy to server
run: |
echo "${{ secrets.SSH_PRIVATE_KEY }}" > private_key
chmod 600 private_key
rsync -avz --delete -e "ssh -i private_key -o StrictHostKeyChecking=no" \
.output/ ${{ secrets.REMOTE_USER }}@${{ secrets.REMOTE_HOST }}:${{ secrets.REMOTE_PATH }}
rm private_key
- name: Restart services
uses: appleboy/ssh-action@v1.0.0
with:
host: ${{ secrets.REMOTE_HOST }}
username: ${{ secrets.REMOTE_USER }}
key: ${{ secrets.SSH_PRIVATE_KEY }}
script: |
cd ${{ secrets.REMOTE_PATH }}
echo "Current directory: $(pwd)"
echo "Checking if ecosystem.config.cjs exists:"
ls -la ecosystem.config.cjs
echo "Installing production dependencies..."
npm install --production --silent
echo "Installing PM2 globally..."
npm install -g pm2 --registry https://registry.npmjs.org/
npx pm2 reload ecosystem.config.cjs
echo "Current PM2 status:"
npx pm2 list
echo "Deployment completed successfully"secrets.SSH_PRIVATE_KEY 等等需要在github项目中配置
执行完上述操作，浏览器 http://云服务器公网IP:3000访问云服务器部署的项目,发现无法访问，此时需要处理权限问题
云服务器访问权限处理
1.云服务器开发对应端口的防火墙 运行sudo ufw allow 3000/tcp
2.云服务器管理后台 安全组规则添加3000端口入站流量
后续